[TOC] ## 概述 * 它等待所有腳本任務完成后，才會運行（即異步觸發方式）。 * 它把 DOM 變動記錄封裝成一個數組進行處理，而不是一條條個別處理 DOM 變動。 * 它既可以觀察 DOM 的所有類型變動，也可以指定只觀察某一類變動。 ## 構造函數 ``` var observer = new MutationObserver(function (mutations, observer) { mutations.forEach(function(mutation) { console.log(mutation); }); }); ``` 參數一是變動數組，參數二是觀察器實例 ## 實例 ### observe() * 第一個參數：所要觀察的 DOM 節點 * 第二個參數：一個配置對象，指定所要觀察的特定變動 ```. var article = document.querySelector('article'); var options = { 'childList': true, 'attributes':true } ; observer.observe(article, options); ``` option選項: * `childList`*：子節點的變動（指新增，刪除或者更改）。 * `attributes`：屬性的變動。 * `characterData`：節點內容或節點文本的變動。 * `subtree`：布爾值，表示是否將該觀察器應用于該節點的所有后代節點。 * `attributeOldValue`：布爾值，表示觀察`attributes`變動時，是否需要記錄變動前的屬性值。 * `characterDataOldValue`：布爾值，表示觀察`characterData`變動時，是否需要記錄變動前的值。 * `attributeFilter`：數組，表示需要觀察的特定屬性（比如`['class','src']`）。 多次添加同一個觀察器是無效的，回調函數依然只會觸發一次。但是，如果指定不同的`options`對象，就會被當作兩個不同的觀察器 ### disconnect() 停止觀察 `observer.disconnect(); ` ### takeRecords 清楚變動記錄 返回變動記錄的數據 `observer.takeRecords(); ` 清除變動記錄 ``` // 保存所有沒有被觀察器處理的變動 var changes = mutationObserver.takeRecords(); // 停止觀察 mutationObserver.disconnect(); ``` ## MutationRecord 對象 * `type`：觀察的變動類型（`attributes`、`characterData`或者`childList`）。 * `target`：發生變動的DOM節點。 * `addedNodes`：新增的DOM節點。 * `removedNodes`：刪除的DOM節點。 * `previousSibling`：前一個同級節點，如果沒有則返回`null`。 * `nextSibling`：下一個同級節點，如果沒有則返回`null`。 * `attributeName`：發生變動的屬性。如果設置了`attributeFilter`，則只返回預先指定的屬性。 * `oldValue`：變動前的值。這個屬性只對`attribute`和`characterData`變動有效，如果發生`childList`變動，則返回`null`。