我正在编写一个 Chrome 插件,它需要记录对 DOM 的所有更改。也是由 chrome devtools 制作的。我可以在内容脚本中使用 MatationObeserver 来获取属性更改,但是通过 devtools 完成插入/删除节点是不可能的。任何人的想法?
问问题
1092 次
2 回答
3
我想我错过了“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
});
但我仍然不知道为什么。我认为子树应该足够了。
于 2014-12-28T11:30:17.647 回答
3
正如您在自己的答案中指出的那样,您缺少subtree: true
. 我想详细说明为什么会这样。
MutationObserver
专注于观察单个节点的变化,这些变化有 3 种形式:
- 'attributes' 适用于 'target' 为 an
Element
并为属性更改发出突变记录,例如target.setAttribute
. - 'characterData' 适用于 'target' 是
Text
orCDataSection
节点并为数据更改发出突变记录,例如node.textContent = ''
ornode.data = ''
。 - 'childList' 适用于 'target' 为
Document
orElement
并在其子级移动时发出突变记录,例如node.appendChild
等。
看来您的问题是对childList
. 当子节点发生变异时它不会创建记录,它会在顶部节点获得或失去子节点时创建记录。
那么我们就到了subtree
,基本上就是这样recursively watch
。这意味着target
该观察者也将记录对子级的任何更改,而不是纯粹对目标的更改。
于 2015-01-31T21:00:02.760 回答