HTML5新特性之Mutation Observer程式碼詳解

1、概述

Mutation Observer（變動觀察器）是監視DOM變動的介面。當DOM物件樹發生任何變動時，Mutation Observer會得到通知。

要概念上，它很接近事件。可以理解為，當DOM發生變動會觸發Mutation Observer事件。但是，它與事件有一個本質不同：事件是同步觸發，也就是說DOM發生變動立刻會觸發對應的事件；Mutation Observer則是異步觸發，DOM發生變動以後，並不會馬上觸發，而是要等到目前所有DOM操作都結束後才觸發。

這樣設計是為了應付DOM變動頻繁的情況。舉例來說，如果在文件中連續插入1000個段落（p元素），會連續觸發1000個插入事件，執行每個事件的回呼函數，這很可能造成瀏覽器的卡頓；而Mutation Observer完全不同，只在1000個段落都插入結束後才會觸發，而且只觸發一次。

註：在控制台可看到log

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 mutationObserverSupport = !!MutationObserver;

2、使用方法

首先，使用MutationObserver建構子，新建一個實例，同時指定這個實例的回呼函數。

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，然後指定要觀察的變動是子元素的變動和屬性變動。最後，將這兩個限定條件作為參數，傳入observer物件的observer方法。

MutationObserver所觀察到的DOM變動（即上面程式碼的option物件），包含以下類型：

• childList：子元素的變更

##attributes：屬性的變動

• ##characterData：節點內容或節點文字的變動

• ##subtree：所有下屬節點（包括子節點和子節點的子節點）的變動

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

除了變動型別，option物件還可以設定以下屬性：

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

characterDataOldValue：值為true或false。如果為true，則表示需要記錄變動前的資料值。

attributesFilter：值為數組，表示需要觀察的特定屬性（例如['
• class

  ', 'str']）。

• 2.2  disconnect方法和takeRecord方法

disconnect方法用來停止觀察。發生對應變動時，不再呼叫回呼函數。

• observer.disconnect();

  takeRecord方法用來清除變動記錄，也就是不再處理未處理的變更。

  observer.takeRecord

2.3 MutationRecord物件

• DOM物件每次發生變化，就會產生一條變動記錄。這個變動記錄對應一個MutationRecord對象，該對象包含了與變動相關的所有資訊。 Mutation Observer進行處理的一個個變動物件所組成的陣列。

  ###MutationRecord物件包含了DOM的相關訊息，有以下屬性：############type:觀察到的變動類型（attribute、characterData或childList）。 ############target:發生變動的DOM物件。 ############addedNodes:新增的DOM物件。 ############removeNodes:刪除的DOM物件。 ###

• previousSibling:前一个同级的DOM对象，如果没有则返回null。

• nextSibling:下一个同级的DOM对象，如果没有就返回null。

• attributeName:发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。

• oldValue:变动前的值。这个属性只对attribute和characterData变动有效，如果发生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表示观察子元素的下级元素）的变动。回调函数会在控制台显示所有变动的类型和目标元素。

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);

上面代码先设定追踪属性变动（'attributes': true），然后设定记录变动前的值。实际发生变动时，会将变动前的值显示在控制台。

以上是HTML5新特性之Mutation Observer程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！