JavaScript Mutation Observer API

2023-03-20 15:47 更新

概述

Mutation Observer API 用來監(jiān)視 DOM 變動。DOM 的任何變動，比如節(jié)點的增減、屬性的變動、文本內容的變動，這個 API 都可以得到通知。

概念上，它很接近事件，可以理解為 DOM 發(fā)生變動就會觸發(fā) Mutation Observer 事件。但是，它與事件有一個本質不同：事件是同步觸發(fā)，也就是說，DOM 的變動立刻會觸發(fā)相應的事件；Mutation Observer 則是異步觸發(fā)，DOM 的變動并不會馬上觸發(fā)，而是要等到當前所有 DOM 操作都結束才觸發(fā)。

這樣設計是為了應付 DOM 變動頻繁的特點。舉例來說，如果文檔中連續(xù)插入1000個<p>元素，就會連續(xù)觸發(fā)1000個插入事件，執(zhí)行每個事件的回調函數(shù)，這很可能造成瀏覽器的卡頓；而 Mutation Observer 完全不同，只在1000個段落都插入結束后才會觸發(fā)，而且只觸發(fā)一次。

Mutation Observer 有以下特點。

  • 它等待所有腳本任務完成后，才會運行（即異步觸發(fā)方式）。
  • 它把 DOM 變動記錄封裝成一個數(shù)組進行處理，而不是一條條個別處理 DOM 變動。
  • 它既可以觀察 DOM 的所有類型變動，也可以指定只觀察某一類變動。

MutationObserver 構造函數(shù)

使用時，首先使用MutationObserver構造函數(shù)，新建一個觀察器實例，同時指定這個實例的回調函數(shù)。

var observer = new MutationObserver(callback);

上面代碼中的回調函數(shù)，會在每次 DOM 變動后調用。該回調函數(shù)接受兩個參數(shù)，第一個是變動數(shù)組，第二個是觀察器實例，下面是一個例子。

var observer = new MutationObserver(function (mutations, observer) {
  mutations.forEach(function(mutation) {
    console.log(mutation);
  });
});

MutationObserver 的實例方法

observe()

observe()方法用來啟動監(jiān)聽，它接受兩個參數(shù)。

  • 第一個參數(shù)：所要觀察的 DOM 節(jié)點
  • 第二個參數(shù)：一個配置對象，指定所要觀察的特定變動
var article = document.querySelector('article');

var  options = {
  'childList': true,
  'attributes':true
} ;

observer.observe(article, options);

上面代碼中，observe()方法接受兩個參數(shù)，第一個是所要觀察的DOM元素是article，第二個是所要觀察的變動類型（子節(jié)點變動和屬性變動）。

觀察器所能觀察的 DOM 變動類型（即上面代碼的options對象），有以下幾種。

  • childList：子節(jié)點的變動（指新增，刪除或者更改）。
  • attributes：屬性的變動。
  • characterData：節(jié)點內容或節(jié)點文本的變動。

想要觀察哪一種變動類型，就在option對象中指定它的值為true。需要注意的是，至少必須同時指定這三種觀察的一種，若均未指定將報錯。

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

  • subtree：布爾值，表示是否將該觀察器應用于該節(jié)點的所有后代節(jié)點。
  • attributeOldValue：布爾值，表示觀察attributes變動時，是否需要記錄變動前的屬性值。
  • characterDataOldValue：布爾值，表示觀察characterData變動時，是否需要記錄變動前的值。
  • attributeFilter：數(shù)組，表示需要觀察的特定屬性（比如['class','src']）。
// 開始監(jiān)聽文檔根節(jié)點（即<html>標簽）的變動
mutationObserver.observe(document.documentElement, {
  attributes: true,
  characterData: true,
  childList: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true
});

對一個節(jié)點添加觀察器，就像使用addEventListener()方法一樣，多次添加同一個觀察器是無效的，回調函數(shù)依然只會觸發(fā)一次。如果指定不同的options對象，以后面添加的那個為準，類似覆蓋。

下面的例子是觀察新增的子節(jié)點。

var insertedNodes = [];
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    for (var i = 0; i < mutation.addedNodes.length; i++) {
      insertedNodes.push(mutation.addedNodes[i]);
    }
  });
  console.log(insertedNodes);
});
observer.observe(document, { childList: true, subtree: true });

disconnect()，takeRecords()

disconnect()方法用來停止觀察。調用該方法后，DOM 再發(fā)生變動，也不會觸發(fā)觀察器。

observer.disconnect();

takeRecords()方法用來清除變動記錄，即不再處理未處理的變動。該方法返回變動記錄的數(shù)組。

observer.takeRecords();

下面是一個例子。

// 保存所有沒有被觀察器處理的變動
var changes = mutationObserver.takeRecords();

// 停止觀察
mutationObserver.disconnect();

MutationRecord 對象

DOM 每次發(fā)生變化，就會生成一條變動記錄（MutationRecord 實例）。該實例包含了與變動相關的所有信息。Mutation Observer 處理的就是一個個MutationRecord實例所組成的數(shù)組。

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

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

應用示例

子元素的變動

下面的例子說明如何讀取變動記錄。

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 option = {
  'childList': true,
  'subtree': true
};

mo.observe(document.body, option);

上面代碼的觀察器，觀察<body>的所有下級節(jié)點（childList表示觀察子節(jié)點，subtree表示觀察后代節(jié)點）的變動?；卣{函數(shù)會在控制臺顯示所有變動的類型和目標節(jié)點。

屬性的變動

下面的例子說明如何追蹤屬性的變動。

var callback = function (records) {
  records.map(function (record) {
    console.log('Previous attribute value: ' + record.oldValue);
  });
};

var mo = new MutationObserver(callback);

var element = document.getElementById('#my_element');

var options = {
  'attributes': true,
  'attributeOldValue': true
}

mo.observe(element, options);

上面代碼先設定追蹤屬性變動（'attributes': true），然后設定記錄變動前的值。實際發(fā)生變動時，會將變動前的值顯示在控制臺。

取代 DOMContentLoaded 事件

網(wǎng)頁加載的時候，DOM 節(jié)點的生成會產(chǎn)生變動記錄，因此只要觀察 DOM 的變動，就能在第一時間觸發(fā)相關事件，也就沒有必要使用DOMContentLoaded事件。

var observer = new MutationObserver(callback);
observer.observe(document.documentElement, {
  childList: true,
  subtree: true
});

上面代碼中，監(jiān)聽document.documentElement（即網(wǎng)頁的<html>HTML 節(jié)點）的子節(jié)點的變動，subtree屬性指定監(jiān)聽還包括后代節(jié)點。因此，任意一個網(wǎng)頁元素一旦生成，就能立刻被監(jiān)聽到。

下面的代碼，使用MutationObserver對象封裝一個監(jiān)聽 DOM 生成的函數(shù)。

(function(win){
  'use strict';

  var listeners = [];
  var doc = win.document;
  var MutationObserver = win.MutationObserver || win.WebKitMutationObserver;
  var observer;

  function ready(selector, fn){
    // 儲存選擇器和回調函數(shù)
    listeners.push({
      selector: selector,
      fn: fn
    });
    if(!observer){
      // 監(jiān)聽document變化
      observer = new MutationObserver(check);
      observer.observe(doc.documentElement, {
        childList: true,
        subtree: true
      });
    }
    // 檢查該節(jié)點是否已經(jīng)在DOM中
    check();
  }

  function check(){
  // 檢查是否匹配已儲存的節(jié)點
    for(var i = 0; i < listeners.length; i++){
      var listener = listeners[i];
      // 檢查指定節(jié)點是否有匹配
      var elements = doc.querySelectorAll(listener.selector);
      for(var j = 0; j < elements.length; j++){
        var element = elements[j];
        // 確保回調函數(shù)只會對該元素調用一次
        if(!element.ready){
          element.ready = true;
          // 對該節(jié)點調用回調函數(shù)
          listener.fn.call(element, element);
        }
      }
    }
  }

  // 對外暴露ready
  win.ready = ready;

})(this);

// 使用方法
ready('.foo', function(element){
  // ...
});

參考鏈接


以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號