8

从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 代码？

4

1 回答 1

12

也添加subTree选项，它应该可以工作，您不仅要监视文档 ( head/body) 的子代，还要监视其后代。（这就是设置document.body它起作用的原因）。

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

小提琴

从文档

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

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

另请参阅注释：

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

于 2013-10-03T04:04:54.240 回答