極其有用的DOM API——MutationObserver監聽節點變化詳解

今天來介紹一個頗有用的DOM API—— MutationObserver

使用背景

頁面或者某個父類DOM須要監聽子節點的變化，來進行統一回調，這個變化包括了：

1. 特定屬性名稱的變化，例如class等
2. 屬性的變化
3. 整個DOM樹中子節點的變化

MutationObserver介紹

這裏採用了MDN的官方介紹，MutationObserver接口提供了監視對DOM樹所作更改的能力。它被設計爲舊的Mutation Events功能的替代品，該功能是DOM3 Events規範的一部分。

MutationObserver主要包括了三個方法，具體可結合下面示例：

• disconnect()——阻止 MutationObserver 實例繼續接收的通知
• observe()——配置MutationObserver在DOM更改匹配給定選項
• takeRecords()——從MutationObserver的通知隊列中刪除全部待處理的通知

實例&示例

經過MutationObserver()便可構造一個實例，下面爲使用示例

// 選擇須要觀察變更的節點
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();

config的值介紹

上文的config爲一個MutationObserverInit字典，描述了MutationObserver的配置，咱們有如下可選屬性進行配置（沒有必選屬性）

屬性	介紹
attributeFilter	要監視的特定屬性名稱的數組。若是未包含此屬性，則對全部屬性的更改都會觸發變更通知。無默認值。
attributeOldValue	當監視節點的屬性改動時，將此屬性設爲 true 將記錄任何有改動的屬性的上一個值。無默認值。
attributes	設爲 true 以觀察受監視元素的屬性值變動。默認值爲 false。
characterData	設爲 true 以監視指定目標節點或子節點樹中節點所包含的字符數據的變化。無默認值。
characterDataOldValue	設爲 true 以在文本在受監視節點上發生更改時記錄節點文本的先前值。無默認值。
childList	設爲 true 以監視目標節點（若是 subtree 爲 true，則包含子孫節點）添加或刪除新的子節點。默認值爲 false。
subtree	設爲 true 以將監視範圍擴展至目標節點整個節點樹中的全部節點。MutationObserverInit 的其餘值也會做用於此子樹下的全部節點，而不單單隻做用於目標節點。默認值爲 false。

callback介紹

callback
一個回調函數，每當被指定的節點或子樹以及配置項有Dom變更時會被調用。回調函數擁有兩個參數：一個是描述全部被觸發改動的 MutationRecord 對象數組，另外一個是調用該函數的MutationObserver 對象。

參考文章：

https://developer.mozilla.org...

附API的適配性：