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

子树：如果要观察到不仅仅是目标的突变，还要观察目标的后代，则设置为true。

所以你要添加的是document的后代而不是它的孩子（或直系后代）。它是body的孩子（这就是为什么只提及childList并使用document.body的作品）。如果要深入监控更改，则需要提及subTree。

另见说明：

注意：至少，childList，attributes或characterData必须设置为true。否则，“抛出了无效或非法的字符串”错误。

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

1 个答案: