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

Question

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

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

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

目前我实施了一个"quick'n'dirty"方法,body.innerHTML.length每隔一段时间检查一次.这当然不会检测导致返回相同长度的变化,但在这种情况下"足够好" - 这种情况发生的可能性非常小,并且在此项目中,未能检测到更改将不会导致丢失的数据.

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

我正在寻找的答案类型是从"精确"(例如事件)到"足够好"的任何东西 - 或许像innerHTML.length方法一样"quick'n'dirty",但执行速度更快.

编辑:我还应该指出,虽然检测已经修改过的精确元素会"很好",但这并不是绝对必要的 - 只要有任何改变这一事实就足够了.希望这能够扩大人们的反应.我将调查突变事件,但我仍然需要IE支持的后备,所以任何笨拙的,创造性的,非常方形的想法将是非常受欢迎的.

Answer 1

为了实现这一目标,DOM4标准取消了Mutation Events并将其替换为Mutation Observers:https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 2

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

仅供参考:"从jQuery 1.7开始,不推荐使用.live()方法.使用.on()附加事件处理程序.旧版本jQuery的用户应优先使用.delegate(),优先于.live()." [来自docs](http://api.jquery.com/live/#typefn) (2认同)
Add'l FYI:[mozilla docs](https://developer.mozilla.org/en/DOM/Mutation_events#Replacement:_mutation_observers)表示观察突变事件已弃用,应替换为"变异观察者".不过,我不知道变异观察者是否完全可用. (2认同)

Answer 3

变异事件是您正在寻找的W3推荐.

不确定它们是否全部受到支持..(IE很可能不支持它们.)