检测/监测DOM变化的最有效方法?

我需要一个有效的机制来检测DOM的变化。 最好是跨浏览器,但如果有任何不是跨浏览器的有效手段,我可​​以实现这些与一个故障安全跨浏览器方法。

特别是,我需要检测会影响页面文本的更改,因此需要任何新的,删除或修改的元素,或者更改内部文本(innerHTML)。

我无法控制所做的更改(可能是由于第三方JavaScript包含等),所以无法从这个angular度来处理 – 我需要以某种方式“监视”更改。

目前我已经实现了一个“quick'n'dirty”方法, body.innerHTML.length隔一段时间检查body.innerHTML.length 。 这当然不会检测到导致返回相同长度的变化,但是在这种情况下“足够好” – 发生这种情况的可能性非常小,在这个项目中,不能检测到变化在丢失的数据。

body.innerHTML.length的问题是它很昂贵。 在一个快速的浏览器上,它可能需要1到5毫秒,这可能会让事情变得非常糟糕 – 我也在处理大量的iframe,这些都会加起来。 我很确定这样做的代价很大,因为innerHTML文本不是由浏览器静态存储的,每次读取时都需要从DOM中计算出来。

我正在寻找的答案的types是从“精确的”(例如事件)到“足够好”的任何东西 – 可能是innerHTML.length方法的“quick'n'dirty”,但执行速度更快。

编辑:我也应该指出,尽pipe检测已被修改的精确元素是“好的”,但这不是绝对必要的 – 只是事实上已经有任何改变就足够了。 希望这能扩大人们的反应。 我要去调查突变事件,但是我仍然需要IE支持的回退,所以任何有创意的,不寻常的想法都是非常受欢迎的。

http://www.quirksmode.org/js/events/DOMtree.html

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

另一个有趣的发现 – http://james.padolsey.com/javascript/monitoring-dom-properties/

为了使这个更新,DOM4标准消除了突变事件,并用突变观察者代替了它们: https : //developer.mozilla.org/en-US/docs/Web/API/MutationObserver

突变事件是你正在寻找的W3build议。

不知道他们是否全力支持..(IE很可能不会支持他们..)

你可以尝试使用DOMNodeInserted和DOMNodeRemoved事件。 根据Quirksmode,他们在大多数浏览器中工作,除IE之外明显的例外…

http://www.quirksmode.org/dom/events/index.html

我最近写了一个插件,完全是 – jquery.initialize

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

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

.each的不同之处在于 – 它需要你的select器,在这种情况下.some-element并在将来等待这个select器的新元素,如果这个元素将被添加,它也将被初始化。

在我们的例子中,初始化函数只是将元素的颜色改为蓝色。 所以如果我们要添加新的元素(不pipe是用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上工作,具有依赖性,详见自述文件页面 。

jQuery Mutate也是这样做的,默认情况下它支持像height, width, scrollHeight等等,但是它也可以扩展一些额外的代码来添加新的事件,比如看看文本是否改变等。

http://www.jqui.net/jquery-projects/jquery-mutate-official/

希望它有帮助