今天來介紹一個頗有用的DOM API—— MutationObserver
頁面或者某個父類DOM須要監聽子節點的變化,來進行統一回調,這個變化包括了:node
這裏採用了MDN的官方介紹,MutationObserver接口提供了監視對DOM樹所作更改的能力。它被設計爲舊的Mutation Events功能的替代品,該功能是DOM3 Events規範的一部分。
MutationObserver主要包括了三個方法,具體可結合下面示例:git
經過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爲一個MutationObserverInit字典,描述了MutationObserver的配置,咱們有如下可選屬性進行配置(沒有必選屬性)數組
屬性 | 介紹 |
---|---|
attributeFilter | 要監視的特定屬性名稱的數組。若是未包含此屬性,則對全部屬性的更改都會觸發變更通知。無默認值。 |
attributeOldValue | 當監視節點的屬性改動時,將此屬性設爲 true 將記錄任何有改動的屬性的上一個值。無默認值。 |
attributes | 設爲 true 以觀察受監視元素的屬性值變動。默認值爲 false。 |
characterData | 設爲 true 以監視指定目標節點或子節點樹中節點所包含的字符數據的變化。無默認值。 |
characterDataOldValue | 設爲 true 以在文本在受監視節點上發生更改時記錄節點文本的先前值。無默認值。 |
childList | 設爲 true 以監視目標節點(若是 subtree 爲 true,則包含子孫節點)添加或刪除新的子節點。默認值爲 false。 |
subtree | 設爲 true 以將監視範圍擴展至目標節點整個節點樹中的全部節點。MutationObserverInit 的其餘值也會做用於此子樹下的全部節點,而不單單隻做用於目標節點。默認值爲 false。 |
callback
一個回調函數,每當被指定的節點或子樹以及配置項有Dom變更時會被調用。回調函數擁有兩個參數:一個是描述全部被觸發改動的 MutationRecord 對象數組,另外一個是調用該函數的MutationObserver 對象。markdown
https://developer.mozilla.org...函數