Yes, you can use jQuery selectors on data returned to mutation observer callbacks. See this jsFiddle. Suppose you had HTML like so and you set an observer, like so: var targetNodes = $(“.myclass”); var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; var myObserver = new MutationObserver(mutationHandler); var obsConfig = { childList: true, characterData: true, attributes: true, subtree: … Read more
Several issues (big to small): When the document is first, statically loaded; the events are childList events, not attributes events. For example, $(“body”).append (‘<p id=”foo” class=”bar”>Hiya!</p><p>blah</p>’); generates one childList event, while a subsequent $(“#foo”).attr (“class”, “bar2”); generates an attributes event. The odds that mutation.addedNodes[0] contains an element with class nav are practically zero. This is … Read more
Only an existing node can be observed. But don’t worry, since getElementById is insanely fast compared to enumeration of all mutations’ added nodes, waiting for the element to appear won’t be taxing at all as you will see in Devtools -> Profiler panel. function waitForAddedNode(params) { new MutationObserver(function(mutations) { var el = document.getElementById(params.id); if (el) … Read more
To understand what is going on is necessary to clear up the difference between attribute (content attribute) and property (IDL attribute). I won’t expand on this as in SO there are already excellent answers covering the topic: Properties and Attributes in HTML .prop() vs .attr() What is happening behind .setAttribute vs .attribute=? When you change … Read more
As I mentioned in a comment, and Xan stated an answer, the error makes it clear that the result of document.querySelectorAll(“.no”)[2] does not evaluate to a Node. From the information you provided in a comment, it is clear that the issue is that the node you desire to observe does not exist when your code … Read more
This is code that listens for mutations on the childlist of #foo and checks to see if a child with the id of bar is added. MutationObserver = window.MutationObserver || window.WebKitMutationObserver; $(“#foo”).live(“click”,function(e) { e.preventDefault(); $(this).append($(“<div />”).html(“new div”).attr(“id”,”bar”)); }); // define a new observer var obs = new MutationObserver(function(mutations, observer) { // look through all mutations … Read more
The docs on MDN have a generic incomplete example and don’t showcase the common pitfalls. Mutation summary library provides a human-friendly wrapper, but like all wrappers it adds overhead. See Performance of MutationObserver to detect nodes in entire DOM. Create and start the observer. Let’s use a recursive document-wide MutationObserver that reports all added/removed nodes. … Read more
To bring this up to date, the DOM4 standard does away with Mutation Events and replaces them with Mutation Observers: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
This answer primarily applies to big and complex pages. If attached before page load/render, an unoptimized MutationObserver callback can add a few seconds to page load time (say, 5 sec to 7 sec) if the page is big and complex (1, 2). The callback is executed as a microtask that blocks further processing of DOM … Read more
Warning! This answer is now outdated. DOM Level 4 introduced MutationObserver, providing an effective replacement for the deprecated mutation events. See this answer to another question for a better solution than the one presented here. Seriously. Don’t poll the DOM every 100 milliseconds; it will waste CPU power and your users will hate you. Since … Read more