javascript - Why doesn't MutationObserver code run on Chrome 30? - Stack Overflow

admin管理员组

文章数量:1287569

From I got the following code:

var insertedNodes = [];
var observer = new WebKitMutationObserver(function(mutations) {
 alert('run');
 mutations.forEach(function(mutation) {
   for (var i = 0; i < mutation.addedNodes.length; i++)
     insertedNodes.push(mutation.addedNodes[i]);
 })
});
observer.observe(document, { childList: true });
console.log(insertedNodes);

var divElement = document.createElement('div');
divElement.innerHTML = 'div element';
document.querySelector('body').appendChild(divElement);

jsFiddle:

As you can see , we should see a alert because a div element is inserted to the DOM. But it appears MutationObserver codes don't run. How can I successfully make the MutationObserver code run?

From http://updates.html5rocks./2012/02/Detect-DOM-changes-with-Mutation-Observers I got the following code:

var insertedNodes = [];
var observer = new WebKitMutationObserver(function(mutations) {
 alert('run');
 mutations.forEach(function(mutation) {
   for (var i = 0; i < mutation.addedNodes.length; i++)
     insertedNodes.push(mutation.addedNodes[i]);
 })
});
observer.observe(document, { childList: true });
console.log(insertedNodes);

var divElement = document.createElement('div');
divElement.innerHTML = 'div element';
document.querySelector('body').appendChild(divElement);

jsFiddle: http://jsfiddle/cUNH9

As you can see , we should see a alert because a div element is inserted to the DOM. But it appears MutationObserver codes don't run. How can I successfully make the MutationObserver code run?

• javascript
• html
• mutation-events
• mutation
• mutation-observers

Share Improve this question Follow edited Sep 22, 2015 at 21:11 sideshowbarker♦ 88.3k2929 gold badges215215 silver badges212212 bronze badges asked Oct 3, 2013 at 3:53 weilouweilou 4,6181111 gold badges4545 silver badges5656 bronze badges 4

• 2 Yes, If you observe document.body it will work.. – PSL Commented Oct 3, 2013 at 4:03
• @plalx I tried both new MutationObserver and new WebKitMutationObserver. They share same oute. – weilou Commented Oct 3, 2013 at 4:06
• @weilou, Do not use document.querySelector('body'), just use document.body. – plalx Commented Oct 3, 2013 at 4:09
• @weilou See my answer... It will work with document as well. – PSL Commented Oct 3, 2013 at 4:10

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

Add subTree option as well, it should work, you want to monitor not just children of document ( head/body) but it's descendants as well. (And that is the reason when set to document.body it works).

observer.observe(document, {
    attributes: true,
    childList: true,
    characterData: true,
    subtree:true
});

Fiddle

From documentation

subtree: Set to true if mutations to not just target, but also target's descendants are to be observed.

So what you are adding is a descendant of the document not its child (or direct descendant). It is a child of body (and that is why just mentioning childList and using document.body works). You need to mention subTree if you want to monitor the changes deep.

Also see the note as well:

NOTE: At the very least, childList, attributes, or characterData must be set to true. Otherwise, "An invalid or illegal string was specified" error is thrown.

本文标签： javascriptWhy doesn39t MutationObserver code run on Chrome 30Stack Overflow