The MDN documentation for MutationObserver.observe() states that the first parameter passed into observe() should be “A DOM Node (which may be an Element) within the DOM tree to watch for changes, or to be the root of a subtree of nodes to be watched.” All the examples I’ve seen for high-level DOM observation advise passing in document.body here, but can
Tag: mutation-observers
How access the original observed node by MutationObserver when subtree is true?
How can I access the original target node when using MutationObserver with options childList and subtree set to true? On the callbacks, the target is changed to whatever node has mutated, and this is expected as per the MDN documentation, but my intention is to always be able to look at the original node, so I can evaluate if it
Mutationobserver not fired when innerhtml changed by javascript code
I have a MutationObserver that observe an element with id shipping_cost and fire function updateTotal() when the innerhtml of the element changed. The MutationObserver works when the innerHTML is changed from external source (such as inspect element). But when i change the innerHTML from inside javascript, MutationObserver did not get fired, where did i do wrong? It can be seen
Rewrite MutationObserver() with async/await
How can I write this mutation observer code, using async/await? I want to return true after console.log(“Button is appearing…”);. Could someone show me the best way to write this code? I also need to clarify, this code is watching for a button, which appears and then disappears. And the reappears again, multiple times. So the mutationObserver, is watching for the
Why MutationObserver does not work for title change in FullCalendar?
I need to know the current title of a FullCalendar. The title could be changed after clicking the navigation buttons. I did not find any FullCalendar native way how to get the title so I was looking for other ways to find out. I thought that MutationObserver would work.. But it does not work when changing the text through the
How to determine if mutation has been called?
I have this mutation observer function below. The issue is that if the condition is met for “false” that console.log will log many times in the browser. I think the best way to fix this is to add something in here that if the mutation is met don’t run function. Does adding in mutationObserver.disconnect(); after the else if condition the
Detect attachShadow event
I’d like to detect an event of attaching shadow to the host element. Use-case: using MutationObserver to watch any DOM changes and post-process the changed content as part of binding (tying) framework’s logic. Why do I need to detect this event? In order to be able to watch for a changes within the shadowDOM, another MutationObserver should be created and
Detect input value change with MutationObserver
I want to detect when text/value change in input field. Even if I change the value with js, I want to detect that changes. Here’s what I’ve tried so far in demo in fiddle. HTML: JavaScript: Answer To understand what is going on is necessary to clear up the difference between attribute (content attribute) and property (IDL attribute). I won’t
MutationObserver and Shadow DOM
I’m using Polymer’s ShadowDOM and MutationObserver polyfills and need to: Detect when a HTMLCanvasElement is inserted so that I can perform layout (its width and height are undetermined through offsetWidth / offsetHeight when detached from the DOM tree) Detect when the element is removed so I can halt its requestAnimationFrame loop Traditionally, without Shadow DOM, this works as follows: Attach
Detect changes in the DOM
I want to execute a function when some div or input are added to the html. Is this possible? For example, a text input is added, then the function should be called. Answer 2015 update, new MutationObserver is supported by modern browsers: Chrome 18+, Firefox 14+, IE 11+, Safari 6+ If you need to support older ones, you may try