js監聽頁面元素是否變化

// 選擇需要觀察變動的節點
const targetNode = document.getElementById('some-id');

// 觀察器的配置（需要觀察什么變動）
const config = { attributes: true, childList: true, subtree: true };

// 當觀察到變動時執行的回調函數
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// 創建一個觀察器實例並傳入回調函數
const observer = new MutationObserver(callback);

// 以上述配置開始觀察目標節點
observer.observe(targetNode, config);

// 之后，可停止觀察
observer.disconnect();

　　

MutationObserver所觀察的DOM變動（即上面代碼的option對象），包含以下類型：

• childList：子元素的變動
• attributes：屬性的變動
• characterData：節點內容或節點文本的變動
• subtree：所有下屬節點（包括子節點和子節點的子節點）的變動

想要觀察哪一種變動類型，就在option對象中指定它的值為true。需要注意的是，不能單獨觀察subtree變動，必須同時指定childList、attributes和characterData中的一種或多種。

除了變動類型，option對象還可以設定以下屬性：

• attributeOldValue：值為true或者為false。如果為true，則表示需要記錄變動前的屬性值。
• characterDataOldValue：值為true或者為false。如果為true，則表示需要記錄變動前的數據值。
• attributesFilter：值為一個數組，表示需要觀察的特定屬性（比如['class', 'str']）。

disconnect方法用來停止觀察。發生相應變動時，不再調用回調函數。

mo.disconnect(); 

takeRecord方法用來清除變動記錄，即不再處理未處理的變動。

mo.takeRecord(); 

MutationRecord對象

DOM對象每次發生變化，就會生成一條變動記錄。這個變動記錄對應一個MutationRecord對象，該對象包含了與變動相關的所有信息。Mutation Observer進行處理的一個個變動對象所組成的數組。

MutationRecord對象包含了DOM的相關信息，有如下屬性：

• type:觀察的變動類型（attribute、characterData或者childList）。
• target:發生變動的DOM對象。
• addedNodes:新增的DOM對象。
• removeNodes:刪除的DOM對象。
• previousSibling:前一個同級的DOM對象，如果沒有則返回null。
• nextSibling:下一個同級的DOM對象，如果沒有就返回null。
• attributeName:發生變動的屬性。如果設置了attributeFilter，則只返回預先指定的屬性。
• oldValue:變動前的值。這個屬性只對attribute和characterData變動有效，如果發生childList變動，則返回null。

• 實例1 - 子元素的變動
  var callback = function(records) {
      records.map(function(record) {
          console.log('mutation type:', record.type);
          console.log('mutation target:', record.target);
      });
  };
  var mo  = new MutationObserver(callback);
  
  var options = {
      childList: true,
      subtree: true
  };
  // 觀察body元素的所有下級元素（childList表示觀察子元素，subtree表示觀察子元素的下級元素）的變動。回調函數會在控制台顯示所有變動的類型和目標元素。
  mo.observe(document.body, options);
  實例2 - 屬性變動
  var callback = function(records) {
      records.map(function(record) {
          console.log('previous attribute:', record.oldValue);
      });
  };
  
  var mo =  new MutationObserver(callback);
  
  var element = document.querySelector('#app');
  var options = {
      attribute: true,
      attributeOldValue: true
  };
  
  mo.observe(element, options);
  

  　　

  MutationObserver檢測頁面劫持