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因此您在扩展程序中使用它们时不会有任何问题。

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

以下是回滚策略：

使用Node.cloneNode(true)克隆您正在观看的节点（参数表示深度克隆）
使用变异观察者观察节点。
更改时，从其父级呼叫Node.replaceChild。

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

防止更新：

如果您只想阻止其他代码触摸它，可以采用更简单的方法。

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

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

1 个答案:

注意变化：

防止更新：