Why doesn't MutationObserver code run on Chrome 30?

Question

From http://updates.html5rocks.com/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.net/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?

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

PSL · Accepted Answer · 2013-10-03 18:29:22Z

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.

@plalx No. Subtree is required, if he wants to monitor deep in body as well, ex, if he wants to add anothe div inside this div.
@plalx check this example remove subtree and try as well. jsfiddle.net/9wtDc
@PS I found the issue. I should not monitor the document.body in Firefox as the DOM is not ready. (i.e. it is empty) during page load. Instead, create a main div in the body and observe that. I wonder why Firefox behaves differently from Chrome and IE.

Collectives™ on Stack Overflow

Why doesn't MutationObserver code run on Chrome 30?

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related