MutationObserver not working
Consider the following code:
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...
Answer
It doesn't appear to work because you are not mutating anything that you are observing. You are neither changing
- attributes (
attributes: true) of thedocumentnode (which is understandable, sincedocumentdoesn't have attributes) - child nodes (
childList: true): the only child node ofdocumentis the<html>node, and you are not removing or replacing it. - character data (
characterData: true): you are not changing any Text, Comment, or ProcessingInstruction children ofdocument(also understandable becausedocumentcannot 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>