DOM Mutation Observers & The Mutation Summary Library
Why Stack Overflow recommends it
Stack Overflow users link it as a quick introduction when answering questions about watching DOM changes with MutationObserver and why it replaced mutation events.
Recommended by 2 people across 2 different months, 2012 to 2016.
What it is
A short 2012 presentation by Rafael Weinstein, the author of the Mutation Summary library, on the DOM Mutation Observers API. It explains how Mutation Observers replace the old mutation events and introduces the Mutation Summary JavaScript library, with a couple of live demos.
What people said
Recommends andyb · 2012-11 · Stack Overflow · on “Detect element style change in chrome”
I am only really aware that the old method performed very badly [LINK] and the new pattern [LINK] was designed as an efficient replacement. I also had a presentation [this video] bookmarked which might be useful. Sorry but I don't have any comparative tests or idea on the performance impact of observing a document. Suspect it will vary between browsers though :-)
Recommends Makyen · 2014-09 · Stack Overflow · on “How to scan thousands of websites and analyze the changes each site's JavaScript makes to the page's DOM”
You appear to be looking for MutationObserver [LINK] . This is the methodology which permits you to register that your code is to be informed about changes the DOM. It appears that you will need to set up a MutationObserver on every element for which you desire to know if it changes. To do this, you will need to walk the DOM adding the MutationObservers to the elements. In general, you should avoid using MutationObservers in most production code as they can significantly impact performance. However, it sounds like you want to specifically investigate the operation of some code, not use it in regular use. For that purpose, they should be fine. A brief overview [LINK] A more in-depth discussio
Cites Geuis · 2012-06 · Stack Overflow · on “What's the state of cross-browser support for DOM Mutation Observers?”
Ido Green provided the answer, but for clarity I will post relevant snippets of the linked docs here. [LINK] DOM Mutation Events are now deprecated. The mutation events have been marked as deprecated in the DOM Events specification, as the API's design is flawed (see details in the "DOM Mutation Events Replacement: The Story So Far / Existing Points of Consensus" post to public-webapps). The practical reasons to avoid the mutation events are performance issues and cross-browser support. These are being replaced by DOM Mutation Observers. [LINK] Mutation Observers provides developers a way to react to changes in a DOM. It is designed as a replacement for Mutation Events defined in the DOM3 Ev
Cites minj · 2016-01 · Stack Overflow · on “How to wait for page to finish loading all content before running script or how to best detect major DOM changes”
Suppose you have a REPLACE function defined... function REPLACE(text) { console.log(text); // change text here return text; } First of all, you should use a TreeWalker [LINK] to traverse the DOM more efficiently. function walk(root) { var walker = document.createTreeWalker(root, window.NodeFilter.SHOW_TEXT, null, false); var node; while ((node = walker.nextNode())) { node.textContent = REPLACE(node.textContent); } } For dynamic DOM your best bet is to use the MutationObserver [LINK] API. function initMO(root) { var MO = window.MutationObserver || window.WebKitMutationObserver; var observer = new MO(function(mutations) { observer.disconnect(); mutations.forEach(function(mutation){ var node =