Menu
Consider the following code:
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.target.nodeName);
});
});
observer.observe(document, {
attributes: true,
childList: true,
characterData: true
});<div>
<ol contenteditable oninput="">
<li>Press enter</li>
</ol>
</div>which is a slight modification of this.
Interacting with the jsbin version page does not produce any log. Where am I wrong? Notice that if I substitute line
observer.observe(document, {
with
observer.observe(document.querySelector('ol'), {
the script turns on working...
249
The MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature, which was part of the DOM3 Events specification.
However, to make the MutationObserver works, at least one of childList, attributes, or characterData needs to be set to true, otherwise the observer () method will throw an error. The following example illustrates how to use the childList property of the mutation options object to monitor for the child node changes.
MutationObserver The MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature, which was part of the DOM3 Events specification.
You may be in some scope where MutationObserver is not defined. It is not some inherent feature of javascript, but a property of the window object. If the window object is not the global in your scope then you’ll have to explicitly specify which window you want a mutation observer for.
First, define the callback function that will execute when the DOM changes: Second, create a MutationObserver object and pass the callback into the MutationObserver () constructor: Third, call the observe () method to start observing the DOM changes. The observe () method has two parameters.
It doesn't appear to work because you are not mutating anything that you are observing. You are neither changing
attributes: true) of the document node (which is understandable, since document doesn't have attributes)childList: true): the only child node of document is the <html> node, and you are not removing or replacing it.characterData: true): you are not changing any Text, Comment, or ProcessingInstruction children of document (also understandable because document cannot have such children).If you replace the <html> node, you can see that the mutation observer works just as configured.
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation.target.nodeName); }); }); observer.observe(document, { attributes: true, childList: true, characterData: true }); document.replaceChild(document.createElement('div'), document.documentElement);What you are doing is changing the content of the ol element, which is a descendant of document.
If you want to listen to these kind of changes, you have to set subtree to true:
observer.observe(document, { attributes: true, childList: true, subtree: true, characterData: true }); More information in the MDN documentation.
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation.target.nodeName); }); }); observer.observe(document, { attributes: true, childList: true, subtree: true, characterData: true });<div> <ol contenteditable oninput=""> <li>Press enter</li> </ol> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
