是否可以检测到DOM的变化并使其不发生？

Question

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

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

DOM中有一个元素,我通过扩展修改它并向右发生但是这个DOM元素在某个动作(发送消息)之后被更新以发送DOM元素被"升级"并返回其原始状态删除更改I制作,我需要的是始终保持我的变化,而不是通过网站修改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);

它们适用于Chrome的最新版本,因此您在扩展程序中使用它们不会有任何问题.

至于回滚,我怀疑你必须自己回滚.

这是一个回滚策略:

1. 克隆您正在观看的节点Node.cloneNode(true)(参数表示深度克隆)
2. 用变异观察者观察节点.
3. Node.replaceChild更改时从其父级调用它.

虽然这不是最有效的方法,但它是最简单的并且很容易实现.更激烈但也许更快的方法是使用返回的变异数组自己恢复每个突变.

防止更新:

如果您只是想阻止其他代码触摸它,则有一种更简单的方法.

1. 使用克隆节点Node.cloneNode(true)(参数表示深度克隆).
2. 等到你确定调用它的外部代码已经获得它的引用.
3. Node.replaceChild从其父级调用它,外部代码现在持有对不在文档中的节点的引用,并且更改不会反映在演示文稿中.
4. 此外,您可能希望更改其ID,类名称和其他"标识"信息,以便外部代码在从DOM中懒惰地选择它时不会捕获它.