如何监控 DOM 的变化?

IT技术 javascript jquery dom
2021-02-24 19:46:27

有没有办法 - 使用 jQuery 或其他方式 - 监视 DOM 的插入、删除、样式更新等?

4个回答

请参阅此处的“MutationEvent”元素:https : //developer.mozilla.org/en/DOM/DOM_event_reference但这些元素已弃用。

jQuery 现在提供了一种将事件附加到与选择器对应的现有和未来元素的方法:http : //docs.jquery.com/Events/live#typefn

由于缺乏正确的 DOM 节点修改信息,这可能是您可以使用的技巧。

突变事件已被弃用
2021-05-06 19:46:27

请参阅突变摘要库。它建立在名为 DOM Mutation Observers 的新浏览器 API 之上。

或者,如果您不需要该库,DOM MutationObserver API 现在可在 Chrome 18+、Firefox 14+、Safari 6+、IE11+ 中使用。有一个很好的例子在这里
2021-05-10 19:46:27
2021-05-16 19:46:27

这仅用于调试目的:

Firebug 目前允许在 html 节点上设置断点。

你必须打开 html 检查器,右键单击一个节点,你有以下选项:

  • 属性更改中断
  • 中断子添加/删除
  • 删除时中断

到达断点后,您还可以浏览调用堆栈。

谷歌浏览器也有类似的功能。

我最近写了一个插件就是这样做的 - jquery.initialize

您可以像使用.each函数一样使用它

$(".some-element").initialize( function(){
    $(this).css("color", "blue"); 
});

与此不同的.each是 - 它需要您的选择器,在这种情况下,.some-element并在将来等待具有此选择器的新元素,如果将添加此类元素,它也会被初始化。

在我们的例子中,初始化函数只是将元素颜色更改为蓝色。因此,如果我们要添加新元素(无论是使用 ajax 还是 F12 检查器或其他任何东西),例如:

$("<div/>").addClass('some-element').appendTo("body"); //new element will have blue color!

插件会立即初始化它。插件还确保一个元素只初始化一次。因此,如果您添加元素,然后将.deatch()其从主体中添加,然后再次添加,则不会再次初始化。

$("<div/>").addClass('some-element').appendTo("body").detach()
    .appendTo(".some-container");
//initialized only once

插件基于MutationObserver- 它将在 IE9 和 10 上工作,依赖项详见自述页面