It’s because textContent triggers a different change than innerHTML, and your observer configuration is not configured to observe the changes made by textContent. textContent changes the child text node of the target. According to MDN setting textContent: Setting this property on a node removes all of its children and replaces them with a single text … Read more
@sliptype – You could do it in the below manner: const element = document.querySelector(‘div’); let prevState = element.classList.contains(‘is-busy’); const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { const { target } = mutation; if (mutation.attributeName === ‘class’) { const currentState = mutation.target.classList.contains(‘is-busy’); if (prevState !== currentState) { prevState = currentState; console.log(`’is-busy’ class ${currentState ? … Read more
You can use a mutation observer. It’s quite widely supported nowadays. var e = document.getElementById(‘test’) var observer = new MutationObserver(function (event) { console.log(event) }) observer.observe(e, { attributes: true, attributeFilter: [‘class’], childList: false, characterData: false }) setTimeout(function () { e.className=”hello” }, 1000) <div id=”test”> </div>
It doesn’t appear to work because you are not mutating anything that you are observing. You are neither changing attributes (attributes: true) of the document node (which is understandable, since document doesn’t have attributes) child nodes (childList: true): the only child node of document is the <html> node, and you are not removing or replacing … 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
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
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 observer will now be watching two targets – target and target2 per your definitions. No error will be thrown, and target will not be “unregistered” in favor of target2. No unexpected or other behaviors will be exhibited. Here is a sample which uses the same MutationObserver on two contenteditable elements. To view this, delete … Read more
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
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