Mutation Observer（變動觀察器）是監視DOM變動的介面。當DOM物件樹發生任何變動時，Mutation Observer會得到通知。
要概念上，它很接近事件。可以理解為，當DOM發生變動會觸發Mutation Observer事件。但是，它與事件有一個本質不同：事件是同步觸發，也就是說DOM發生變動立刻會觸發對應的事件；Mutation Observer則是異步觸發，DOM發生變動以後，並不會馬上觸發，而是要等到目前所有DOM操作都結束後才觸發。
這樣設計是為了應付DOM變動頻繁的情況。舉例來說，如果在文件中連續插入1000個段落（p元素），會連續觸發1000個插入事件，執行每個事件的回呼函數，這很可能造成瀏覽器的卡頓；而Mutation Observer完全不同，只在1000個段落都插入結束後才會觸發，而且只觸發一次。
註：在控制台可看到log
Mutation Observer有以下特點：
目前，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;首先，使用MutationObserver建構子，新建一個實例，同時指定這個實例的回呼函數。
var observer = new MutationObserver(callback);
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：子元素的變更
#attributeOldValue：值為true或是false。如果為true，則表示需要記錄變動前的屬性值。
characterDataOldValue：值為true或false。如果為true，則表示需要記錄變動前的資料值。
', 'str']）。
2.2 disconnect方法和takeRecord方法
observer.disconnect();
takeRecord方法用來清除變動記錄，也就是不再處理未處理的變更。
observer.takeRecord
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。
下面的例子说明如果读取变动记录。
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表示观察子元素的下级元素）的变动。回调函数会在控制台显示所有变动的类型和目标元素。
下面的例子说明如何追踪属性的变动。
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中文網其他相關文章！
