javascript - 是否有可能检测到 DOM 中的变化并使其不发生？

Question

是否有可能以某种方式监视 DOM 插入和对 DOM 的修改，然后以某种方式决定是否完成？通过一些参数取消事件或导致事件不发生，而我执行自定义操作，例如一秒回调。

不需要在所有浏览器中工作，更具体地说，我需要它在某些情况下应用，特别是对我为 Google Chrome 创建的扩展程序执行测试，因此浏览器是 Google Chrome。

DOM 中有一个元素，我通过扩展对其进行修改并正确发生，但此 DOM 元素在某个操作(发送消息)后更新以发送 DOM 元素“升级”并返回到其原始状态删除我所做的更改，我需要的是始终保留我的更改，而不是通过网站修改 DOM 强加的“原始”。

Answer 1

观察变化:

您正在寻找的是 MutationObserver .

示例来自 MDN

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

他们 work on recent versionf of Chrome所以你在扩展中使用它们应该没有任何问题。

至于回滚，我怀疑你必须自己回滚。

这是一个回滚策略:

1. 使用 Node.cloneNode(true) 克隆您正在观察的节点(参数表示深度克隆)
2. 用变异观察者观察节点。
3. 调用Node.replaceChild当它发生变化时从它的 parent 那里得到。

虽然这不是最有效的方法，但它是最简单且易于实现的方法。一种更激进但可能更快的方法是使用返回的突变数组自行恢复每个突变。

防止更新:

如果你只是想防止其他代码接触它，还有一种更简单的方法。

1. 使用 Node.cloneNode(true) 克隆节点(该参数表示深度克隆)。
2. 等到您确定调用它的外部代码已获得对它的引用。
3. 调用Node.replaceChild在它的父节点上，外部代码现在持有对不在文档中的节点的引用，并且更改不会反射(reflect)在演示文稿中。
4. 此外，您可能想要更改它的 ID、类名和其他“标识”信息，这样如果外部代码从 DOM 中懒惰地选择它，它就不会捕获它。