javascript - 为什么 MutationObserver 代码不能在 Chrome 30 上运行？

Question

来自 http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers我得到以下代码:

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

如您所见，我们应该看到一个警告，因为 div 元素已插入到 DOM 中。但似乎 MutationObserver 代码没有运行。如何才能成功运行 MutationObserver 代码？

Answer 1

同时添加 subTree 选项，它应该可以工作，您不仅要监视文档的子项 (head/body)，还要监视它的后代。 (这就是设置为 document.body 时有效的原因)。

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

Fiddle

来自 documentation

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

所以您要添加的是 document 的后代，而不是它的子代(或直接后代)。它是 body 的 child (这就是为什么只提到 childList 并使用 document.body 的原因)。如果你想深入监控变化，你需要提到 subTree。

另见注释:

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.