Question

7

MutationObserver not working

rated 0 times [ 8] [ 1] / answers: 1 / hits: 32392 / 9 Years ago, fri, june 19, 2015, 12:00:00

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...

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jayla

Add To Favorites

Follow

Total Points: 14

Total Questions: 96

Total Answers: 123

Location: Greenland

Member since Fri, Jul 31, 2020

4 Years ago

answered 9 Years ago dominics · Accepted 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 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 it.

character data (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>