javascript - Most efficient method of detecting/monitoring DOM changes? -

i need efficient mechanism detecting changes dom. preferably cross-browser, if there's efficient means not cross browser, can implement these fail-safe cross browser method.

in particular, need detect changes affect text on page, new, removed or modified elements, or changes inner text (innerhtml) required.

i don't have control on changes being made (they due 3rd party javascript includes, etc), can't approached angle - need "monitor" changes somehow.

currently i've implemented "quick'n'dirty" method checks body.innerhtml.length @ intervals. won't of course detect changes result in same length being returned, in case "good enough" - chances of happening extremely slim, , in project, failing detect change won't result in lost data.

the problem body.innerhtml.length it's expensive. can take between 1 , 5 milliseconds on fast browser, , can bog things down lot - i'm dealing large-ish number of iframes , adds up. i'm pretty sure expensiveness of doing because innerhtml text not stored statically browsers, , needs calculated dom every time read.

the types of answers looking "precise" (for example event) "good enough" - perhaps "quick'n'dirty" innerhtml.length method, executes faster.

edit: should point out whilst "nice" detect precise element has been modified, not absolute necessity - fact there has been any change enough. broadens people's responses. i'm going investigate mutation events, still need fallback ie support, whacky, creative, outside-of-the-square ideas welcome.

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

jquery supports way attach events existing , future elements corresponding selector: http://docs.jquery.com/events/live#typefn

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