As mentioned in the comments above. The APIs you’re looking for are: ResizeObserver and IntersectionObserver. However, there are a few things to note: ResizeObserver will only fire when the observed element changes size. And it will essentially only give you correct values for width and height. Both ResizeObserver and IntersectionObserver are supposed to not block … 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 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
Ultimate approach so far, with smallest code: (IE11+, FF, Webkit) Using MutationObserver and falling back to the deprecated Mutation events if needed: (Example below if only for DOM changes concerning nodes appended or removed) var observeDOM = (function(){ var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; return function( obj, callback ){ if( !obj || obj.nodeType !== 1 … Read more