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

Question

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

Answer 1

我想我错过了“childList：true”，如下所示：

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
});

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

Answer 2

正如您在自己的答案中指出的那样，您缺少subtree: true. 我想详细说明为什么会这样。

MutationObserver专注于观察单个节点的变化，这些变化有 3 种形式：

• 'attributes' 适用于 'target' 为 anElement并为属性更改发出突变记录，例如target.setAttribute.
• 'characterData' 适用于 'target' 是TextorCDataSection节点并为数据更改发出突变记录，例如node.textContent = ''or node.data = ''。
• 'childList' 适用于 'target' 为DocumentorElement并在其子级移动时发出突变记录，例如node.appendChild等。

看来您的问题是对childList. 当子节点发生变异时它不会创建记录，它会在顶部节点获得或失去子节点时创建记录。

那么我们就到了subtree，基本上就是这样recursively watch。这意味着target该观察者也将记录对子级的任何更改，而不是纯粹对目标的更改。