Question

我正在编写一个Chrome插件，需要记录对DOM的所有更改。也是铬devtools制造的那些。我可以在内容脚本中使用MatationObeserver来获取属性更改，但是通过devtools完成插入/删除节点是不可能的。有人有想法吗？

Answer 1

正如您在自己的回答中指出的那样，您遗漏了subtree: true。我想详细说明为什么会这样。

MutationObserver专注于观察单个节点的更改，这些更改有三种形式：

'attributes'适用于'target'为Element并发出变更属性的变异记录，例如： target.setAttribute。
'characterData'适用于'target'是Text或CDataSection节点并发出变更数据的突变记录，例如： node.textContent = ''或node.data = ''。
'childList'适用于'target'为Document或Element并在其子项移动时发出变异记录，例如node.appendChild等。

您的问题似乎是对childList的误解。当孩子们发生变异时，不创建记录，当顶级节点获得收益或失去孩子时，它会创建记录。

然后我们转到subtree，基本上是recursively watch。这意味着target的儿童的任何变化也将由该观察者记录，而不是纯粹改变目标。

Answer 2

我想我错过了＃34; childList：true＆＃34;如：

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    for(var mutation in mutations){
        modificationList.push(mutation);
    }
});

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

但我仍然不知道为什么。我认为子树应该足够了。

通过chrome devtools添加/删除节点时观察DOM突变

2 个答案: