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)。后者可以解决我的问题。

在节点上存储属性

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

使用可见的 DOM 节点数组

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

Answer 1

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

document.body.MY_WEIRD_PROP_348u9erhhhhh0asdf_IN_USE = 1

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