检测/监视DOM更改的最有效方法？

Question

我需要一种有效的机制来检测DOM的更改。最好是跨浏览器，但如果有任何非跨浏览器的有效手段，我可以使用故障保护跨浏览器方法来实现。特别是，我需要检测可能影响页面上文本的更改，因此需要任何新的，已删除或已修改的元素或对内部文本（innerHTML）的更改。我无法控制所做的更改（它们可能归因于第三方JavaScript包含，等等），因此无法从这个角度进行处理-我需要以某种方式“监视”更改。目前，我已经实现了“ quick'n'dirty”方法，该方法会body.innerHTML.length定期检查。当然，这不会检测到导致返回相同长度的更改，但是在这种情况下，它“足够好”-发生这种情况的可能性极小，并且在此项目中，不会检测到更改不会导致在丢失的数据中。问题body.innerHTML.length在于它很昂贵。在快速的浏览器上，它可能需要1到5毫秒之间的时间，这可能会使事情陷入困境-我还处理了大量的iframe，这一切加起来。我非常确定这样做的代价是因为浏览器不会静态地存储innerHTML文本，并且每次读取DOM时都需要根据DOM计算这些内容。我正在寻找的答案类型包括从“精确”（例如事件）到“足够好”的任何内容-可能与innerHTML.length方法一样“快速”，但执行速度更快。编辑：我还应该指出，虽然检测到已修改的精确元素将是“不错的”，但这并不是绝对必要的-只要有任何更改就足够了。希望这能扩大人们的反应。我将研究Mutation Events，但我仍然需要IE支持的后备支持，因此，任何古怪，有创意，不拘一格的想法都将受到欢迎。

Answer 1

我最近写了一个完全可以做到这一点的插件-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上运行，并且具有自述文件页上所述的依赖项。