[TOC] ## 概述 Mutation Observer（變動觀察器）是監視DOM變動的接口。DOM發生任何變動，Mutation Observer會得到通知。 概念上，它很接近事件。可以理解為，當DOM發生變動，會觸發Mutation Observer事件。但是，它與事件有一個本質不同：事件是同步觸發，也就是說，當DOM發生變動，立刻會觸發相應的事件；Mutation Observer則是異步觸發，DOM發生變動以后，并不會馬上觸發，而是要等到當前所有DOM操作都結束后才觸發。 這樣設計是為了應付DOM變動頻繁的特點。舉例來說，如果在文檔中連續插入1000個段落（p元素），就會連續觸發1000個插入事件，執行每個事件的回調函數，這很可能造成瀏覽器的卡頓；而Mutation Observer完全不同，只在1000個段落都插入結束后才會觸發，而且只觸發一次。 Mutation Observer有以下特點： * 它等待所有腳本任務完成后，才會運行，即采用異步方式。 * 它把DOM變動記錄封裝成一個數組進行處理，而不是一條條地個別處理DOM變動。 * 它既可以觀察發生在DOM的所有類型變動，也可以觀察某一類變動。 目前，Firefox（14+）、 Chrome(26+)、Opera（15+）、IE（11+）和Safari（6.1+）支持這個API。Safari 6.0和Chrome 18-25使用這個API的時候，需要加上WebKit前綴（WebKitMutationObserver）。可以使用下面的表達式，檢查當前瀏覽器是否支持這個API。 ~~~ var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; var observeMutationSupport = !!MutationObserver; ~~~ ## MutationObserver構造函數 首先，使用MutationObserver構造函數，新建一個觀察器實例，同時指定這個實例的回調函數。 ~~~ var observer = new MutationObserver(callback); ~~~ 觀察器的回調函數會在每次DOM發生變動后調用。它接受兩個參數，第一個是變動數組（詳見后文），第二個是觀察器實例。 ## Mutation Observer實例的方法 ### observe() observe方法指定所要觀察的DOM節點，以及所要觀察的特定變動。 ~~~ var article = document.querySelector('article'); var options = { 'childList': true, 'attributes':true } ; observer.observe(article, options); ~~~ 上面代碼中，observe方法接受兩個參數，第一個是所要觀察的DOM元素是article，第二個是所要觀察的變動類型（子節點變動和屬性變動）。 觀察器所能觀察的DOM變動類型（即上面代碼的options對象），有以下幾種： * childList：子節點的變動。 * attributes：屬性的變動。 * characterData：節點內容或節點文本的變動。 * subtree：所有后代節點的變動。 想要觀察哪一種變動類型，就在option對象中指定它的值為true。需要注意的是，不能單獨觀察subtree變動，必須同時指定childList、attributes和characterData中的一種或多種。 除了變動類型，options對象還可以設定以下屬性： * attributeOldValue：類型為布爾值，表示觀察attributes變動時，是否需要記錄變動前的屬性值。 * characterDataOldValue：類型為布爾值，表示觀察characterData變動時，是否需要記錄變動前的值。 * attributeFilter：類型為數組，表示需要觀察的特定屬性（比如['class','src']）。 對一個節點添加觀察器，就像添加addEventListener方法一樣。多次添加同一個觀察器是無效的，回調函數依然只會觸發一次。但是，如果指定不同的options對象，就會被當作兩個不同的觀察器。 下面的例子觀察新增的子節點。 ~~~ 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]); }) }); observer.observe(document, { childList: true }); console.log(insertedNodes); ~~~ ### disconnect()，takeRecords（） disconnect方法用來停止觀察。再發生相應變動，就不再調用回調函數。 ~~~ observer.disconnect(); ~~~ takeRecords方法用來清除變動記錄，即不再處理未處理的變動。該方法返回變動記錄的數組。 ~~~ observer.takeRecords(); ~~~ ### MutationRecord對象 DOM每次發生變化，就會生成一條變動記錄。這個變動記錄對應一個MutationRecord對象，該對象包含了與變動相關的所有信息。Mutation Observer處理的是一個個MutationRecord對象所組成的數組。 MutationRecord對象包含了DOM的相關信息，有如下屬性： * type：觀察的變動類型（attribute、characterData或者childList）。 * target：發生變動的DOM節點。 * addedNodes：新增的DOM節點。 * removedNodes：刪除的DOM節點。 * previousSibling：前一個同級節點，如果沒有則返回null。 * nextSibling：下一個同級節點，如果沒有則返回null。 * attributeName：發生變動的屬性。如果設置了attributeFilter，則只返回預先指定的屬性。 * oldValue：變動前的值。這個屬性只對attribute和characterData變動有效，如果發生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的所有下級節點（childList表示觀察子節點，subtree表示觀察后代節點）的變動。回調函數會在控制臺顯示所有變動的類型和目標節點。 ### 屬性的變動 下面的例子說明如何追蹤屬性的變動。 ~~~ 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），然后設定記錄變動前的值。實際發生變動時，會將變動前的值顯示在控制臺。 ### 取代DOMContentLoaded事件 網頁加載的時候，DOM節點的生成會產生變動記錄，因此只要觀察DOM的變動，就能在第一時間觸發相關事件，因此也就沒有必要使用DOMContentLoaded事件。 ~~~ var observer = new MutationObserver(callback); observer.observe(document.documentElement, { childList: true, subtree: true }); ~~~ 上面代碼中，監聽document.documentElement（即HTML節點）的子節點的變動，subtree屬性指定監聽還包括后代節點。因此，任意一個網頁元素一旦生成，就能立刻被監聽到。 下面的代碼，使用MutationObserver對象封裝一個監聽DOM生成的函數。 ~~~ (function(win){ 'use strict'; var listeners = []; var doc = win.document; var MutationObserver = win.MutationObserver || win.WebKitMutationObserver; var observer; function ready(selector, fn){ // 儲存選擇器和回調函數 listeners.push({ selector: selector, fn: fn }); if(!observer){ // 監聽document變化 observer = new MutationObserver(check); observer.observe(doc.documentElement, { childList: true, subtree: true }); } // 檢查該節點是否已經在DOM中 check(); } function check(){ // 檢查是否匹配已儲存的節點 for(var i = 0; i < listeners.length; i++){ var listener = listeners[i]; // 檢查指定節點是否有匹配 var elements = doc.querySelectorAll(listener.selector); for(var j = 0; j < elements.length; j++){ var element = elements[j]; // 確保回調函數只會對該元素調用一次 if(!element.ready){ element.ready = true; // 對該節點調用回調函數 listener.fn.call(element, element); } } } } // 對外暴露ready win.ready = ready; })(this); ready('.foo', function(element){ // ... }); ~~~ ## 參考鏈接 * Tiffany Brown,?[Getting to know mutation observers](http://dev.opera.com/articles/view/mutation-observers-tutorial/) * Michal Budzynski,?[JavaScript: The less known parts. DOM Mutations](http://michalbe.blogspot.com/2013/04/javascript-less-known-parts-dom.html) * Jeff Griffiths,?[DOM MutationObserver – reacting to DOM changes without killing browser performance](https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/) * Addy Osmani,?[Detect, Undo And Redo DOM Changes With Mutation Observers](http://addyosmani.com/blog/mutation-observers/) * Ryan Morr,?[Using Mutation Observers to Watch for Element Availability](http://ryanmorr.com/using-mutation-observers-to-watch-for-element-availability/)