一尘不染

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

javascript

我需要一种有效的机制来检测DOM的更改。最好是跨浏览器,但如果有任何 跨浏览器的有效手段,我可以使用故障保护跨浏览器方法来实现。

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

我无法控制所做的更改(它们可能是由于第三方JavaScript包含,等等),因此无法从这个角度进行处理-我需要以某种方式“监视”更改。

目前,我已经实现了“
quick’n’dirty”方法,该方法会body.innerHTML.length定期检查。当然,这不会检测到导致返回相同长度的更改,但是在这种情况下,它“足够好”-发生这种情况的可能性非常小,并且在此项目中,不会检测到更改不会导致在丢失的数据中。

问题body.innerHTML.length在于它很昂贵。在 快速的 浏览器上,它可能需要1到5毫秒之间的时间,这可能会使事情陷入困境-
我还处理了大量的iframe,所有这些问题加起来了。我很确定这样做的代价是因为浏览器不会静态存储innerHTML文本,并且每次读取DOM时都需要从DOM计算该文本。

我正在寻找的答案类型包括从“精确”(例如事件)到“足够好”的任何内容-可能与innerHTML.length方法一样“快速”,但执行速度更快。

编辑:我还应该指出,虽然检测到已修改的精确元素将是“不错的”,但这并不是绝对必要的-只要有 任何
更改就足够了。希望这能扩大人们的反应。我将研究Mutation
Events,但是我仍然需要IE支持的后备支持,因此,任何古怪,有创造力,不拘一格的想法都将受到欢迎。


阅读 227

收藏
2020-05-01

共1个答案

一尘不染

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

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

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

2020-05-01