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

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

使用背景

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

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

MutationObserver介紹

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

MutationObserver主要包括了三個方法,具體可結合下面示例:git

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

實例&示例

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

// 選擇須要觀察變更的節點
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 對象。markdown

參考文章:

https://developer.mozilla.org...函數

附API的適配性:

image

相關文章
相關標籤/搜索