javascript - 已见 DOM 节点的哈希值

Question

我想将 MutationObserver 附加到 DOM，这样我就可以看到发生了什么变化。很简单。

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    processNode(mutation.target);
  });
});

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

问题出在 processNode 我想编辑节点，这触发了 MutationObserver 再次调用 processNode 双重编辑节点，我不想要。

那么我怎样才能创建一个散列来跟踪我已经看到的内容呢？我尝试过的事情:

1. 弱图

不起作用，因为所有节点在插入前都被序列化为字符串。所以我的键变成了[object Text]。 编辑:我正在执行 seenMap[node] = true 而不是 seenMap.set(node, true)。后者可以解决我的问题。

1. 在节点上存储属性

我不想与页面上运行的任何其他内容发生冲突(我正在编写 Chrome 扩展程序)。

1. 使用一组可见的 DOM 节点

我对针对每个 DOM 更改的线性搜索不太感兴趣。

Answer 1

向节点对象添加属性没有错。 JQuery 一直这样做，并且在浏览器扩展中很常见。另外，我不是说像 <img data-foo="bar"/> 这样的元素属性.我的意思是在 JS 中向节点对象添加属性，例如

document.body.MY_WEIRD_PROP_348u9erhhhhh0asdf_IN_USE = 1

显然，您希望它是模糊的以完全避免碰撞。如果您能想到这会干扰另一个脚本的实例，请赐教。