如何监控DOM的变化？

Question

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

Answer 1

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

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

由于缺少正确的DOM节点修改信息，这可能是一种技巧。

Answer 2

请参阅mutation-summary库。它建立在名为DOM Mutation Observers的新浏览器API之上。

Answer 3

这仅用于调试目的：

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

您必须打开html检查器，右键单击节点，您有以下选项：

• 属性更改中断
• 中断儿童添加/删除
• 中断删除

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

Google Chrome也有类似的功能。

Answer 4

我最近编写了一个插件，它正是这样做的 - 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上使用依赖关系，详见readme page。