检测/监控DOM变化最有效的方法？ [英] Most efficient method of detecting/monitoring DOM changes?

问题描述

我需要一个有效的机制来检测对DOM的更改。优选的是跨浏览器，但是如果有任何有效的手段，不是跨浏览器，我可以使用故障安全的跨浏览器方法实现这些。

I need an efficient mechanism for detecting changes to the DOM. Preferably cross-browser, but if there's any efficient means which are not cross browser, I can implement these with a fail-safe cross browser method.

特别是，我需要检测会影响页面上的文本的更改，因此需要新的，删除的或修改的元素或内部文本（innerHTML）的更改。

In particular, I need to detect changes that would affect the text on a page, so any new, removed or modified elements, or changes to inner text (innerHTML) would be required.

我无法控制所做的更改（他们可能是由于第三方的javascript包含等），所以不能从这个角度来处理 - 我需要监控某些变化

I don't have control over the changes being made (they could be due to 3rd party javascript includes, etc), so it can't be approached from this angle - I need to "monitor" for changes somehow.

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

Currently I've implemented a "quick'n'dirty" method which checks body.innerHTML.length at intervals. This won't of course detect changes which result in the same length being returned, but in this case is "good enough" - the chances of this happening are extremely slim, and in this project, failing to detect a change won't result in lost data.

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

The problem with body.innerHTML.length is that it's expensive. It can take between 1 and 5 milliseconds on a fast browser, and this can bog things down a lot - I'm also dealing with a large-ish number of iframes and it all adds up. I'm pretty sure the expensiveness of doing this is because the innerHTML text is not stored statically by browsers, and needs to be calculated from the DOM every time it is read.

我正在寻找的答案类型是从精确（例如事件）到足够好的任何东西 - 也许像innerHTML.length方法那样quick'n'dirty，但执行速度更快。

The types of answers I am looking for are anything from the "precise" (for example event) to the "good enough" - perhaps something as "quick'n'dirty" as the innerHTML.length method, but that executes faster.

编辑：
我还应该指出，虽然检测已修改的精确元素是不错的，但并不绝对必要 - 只是事实已经有了任何变化将是足够好的。希望这扩大了人们的回应。我要调查变形事件，但是我仍然需要一个IE支持的回退，所以任何一个重要的，创造性的，外面的想法都是非常受欢迎的。

I should also point out that whilst it would be "nice" to detect the precise element that has been modified, it is not an absolute necessity - just the fact that there has been any change would be good enough. Hopefully this broadens people's responses. I'm going to investigate Mutation Events, but I still need a fallback for IE support, so any whacky, creative, outside-of-the-square ideas would be very welcome.

推荐答案

http：//www.quirksmode。 org / js / events / DOMtree.html

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

jQuery now supports a way to attach events to existing and future elements corresponding to a selector: http://docs.jquery.com/Events/live#typefn

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

Another interesting find - http://james.padolsey.com/javascript/monitoring-dom-properties/

这篇关于检测/监控DOM变化最有效的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！