1、概述

Mutation Observer（變動觀察器）是監(jiān)視DOM變動的接口。當(dāng)DOM對象樹發(fā)生任何變動時，Mutation Observer會得到通知。

要概念上，它很接近事件?？梢岳斫鉃?，當(dāng)DOM發(fā)生變動會觸發(fā)Mutation Observer事件。但是，它與事件有一個本質(zhì)不同：事件是同步觸發(fā)，也就是說DOM發(fā)生變動立刻會觸發(fā)相應(yīng)的事件；Mutation Observer則是異步觸發(fā)，DOM發(fā)生變動以后，并不會馬上觸發(fā)，而是要等到當(dāng)前所有DOM操作都結(jié)束后才觸發(fā)。

這樣設(shè)計是為了應(yīng)付DOM變動頻繁的情況。舉例來說，如果在文檔中連續(xù)插入1000個段落（p元素），會連續(xù)觸發(fā)1000個插入事件，執(zhí)行每個事件的回調(diào)函數(shù)，這很可能造成瀏覽器的卡頓；而Mutation Observer完全不同，只在1000個段落都插入結(jié)束后才會觸發(fā)，而且只觸發(fā)一次。

注：在控制臺可看到log

Mutation Observer有以下特點：

• 它等待所有腳本任務(wù)完成后，才會運行，即采用異步方式

• 它把DOM變動記錄封裝成一個數(shù)組進(jìn)行處理，而不是一條條地個別處理DOM變動。

• 它即可以觀察發(fā)生在DOM節(jié)點的所有變動，也可以觀察某一類變動

目前，F(xiàn)irefox(14+)、Chrome(26+)、Opera(15+)、IE(11+)和Safari(6.1+)支持這個API。Safari 6.0和Chrome 18-25使用這個API的時候，需要加上WebKit前綴（WebKitMutationObserver）?？梢允褂孟旅娴谋磉_(dá)式檢查瀏覽器是否支持這個API。

var MutationObserver = window.MutationObserver ||      window.WebKitMutationObserver ||      window.MozMutationObserver;var mutationObserverSupport = !!MutationObserver;

2、使用方法

首先，使用MutationObserver構(gòu)造函數(shù)，新建一個實例，同時指定這個實例的回調(diào)函數(shù)。

var observer = new MutationObserver(callback);

2.1 observer方法

observer方法指定所要觀察的DOM元素，以及要觀察的特定變動。

var article = document.querySelector('article');  var options = {      'childList': true,      'arrtibutes': true};    observer.observer(article, options);

上面代碼首先指定，所要觀察的DOM元素提article，然后指定所要觀察的變動是子元素的變動和屬性變動。最后，將這兩個限定條件作為參數(shù)，傳入observer對象的observer方法。

MutationObserver所觀察的DOM變動（即上面代碼的option對象），包含以下類型：

• childList：子元素的變動

• attributes：屬性的變動

• characterData：節(jié)點內(nèi)容或節(jié)點文本的變動

• subtree：所有下屬節(jié)點（包括子節(jié)點和子節(jié)點的子節(jié)點）的變動

想要觀察哪一種變動類型，就在option對象中指定它的值為true。需要注意的是，不能單獨觀察subtree變動，必須同時指定childList、attributes和characterData中的一種或多種。

除了變動類型，option對象還可以設(shè)定以下屬性：

• attributeOldValue：值為true或者為false。如果為true，則表示需要記錄變動前的屬性值。

• characterDataOldValue：值為true或者為false。如果為true，則表示需要記錄變動前的數(shù)據(jù)值。

• attributesFilter：值為一個數(shù)組，表示需要觀察的特定屬性（比如['class', 'str']）。

2.2 disconnect方法和takeRecord方法

disconnect方法用來停止觀察。發(fā)生相應(yīng)變動時，不再調(diào)用回調(diào)函數(shù)。

observer.disconnect();

takeRecord方法用來清除變動記錄，即不再處理未處理的變動。

observer.takeRecord

2.3 MutationRecord對象

DOM對象每次發(fā)生變化，就會生成一條變動記錄。這個變動記錄對應(yīng)一個MutationRecord對象，該對象包含了與變動相關(guān)的所有信息。Mutation Observer進(jìn)行處理的一個個變動對象所組成的數(shù)組。

MutationRecord對象包含了DOM的相關(guān)信息，有如下屬性：

• type:觀察的變動類型（attribute、characterData或者childList）。

• target:發(fā)生變動的DOM對象。

• addedNodes:新增的DOM對象。

• removeNodes:刪除的DOM對象。

• previousSibling:前一個同級的DOM對象，如果沒有則返回null。

• nextSibling:下一個同級的DOM對象，如果沒有就返回null。

• attributeName:發(fā)生變動的屬性。如果設(shè)置了attributeFilter，則只返回預(yù)先指定的屬性。

• oldValue:變動前的值。這個屬性只對attribute和characterData變動有效，如果發(fā)生childList變動，則返回null。

3、實例

3.1 子元素的變動

下面的例子說明如果讀取變動記錄。

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.observer(document.body, option);

上面代碼的觀察器，觀察body元素的所有下級元素（childList表示觀察子元素，subtree表示觀察子元素的下級元素）的變動?；卣{(diào)函數(shù)會在控制臺顯示所有變動的類型和目標(biāo)元素。

3.2、屬性的變動

下面的例子說明如何追蹤屬性的變動。

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 option = {      'attribute': true,      'attributeOldValue': true};    mo.observer(element, option);

上面代碼先設(shè)定追蹤屬性變動（'attributes': true），然后設(shè)定記錄變動前的值。實際發(fā)生變動時，會將變動前的值顯示在控制臺。