是否可以檢測到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)克隆您正在觀看的節點Node.cloneNode(true) （該參數表示深度克隆）
2. 用變異觀察者觀察節點。
3. Node.replaceChild時，從其父級調用Node.replaceChild 。

雖然這不是最有效的方法，但它是最簡單的並且很容易實現。 更激烈但也許更快的方法是使用返回的變異數組自己恢復每個突變。

防止更新：

如果您只是想阻止其他代碼觸摸它，則有一種更簡單的方法。

1. 使用Node.cloneNode(true)克隆節點（該參數表示深度克隆）。
2. 等到你確定調用它的外部代碼已經獲得它的引用。
3. 從其父級調用Node.replaceChild ，外部代碼現在持有對不在文檔中的節點的引用，並且更改不會反映在演示文稿中。
4. 此外，您可能希望更改其ID，類名稱和其他“標識”信息，以便外部代碼在從DOM中懶惰地選擇它時不會捕獲它。