1 概述

Mutation observer 是用于代替 Mutation events 作為觀察DOM樹結(jié)構發(fā)生變化時，做出相應處理的API。為什么要使用mutation observer 去代替 mutation events 呢，我們先了解一下mutation events

Mutation Events

Mutation events 是在 DOM3中定義，用于監(jiān)聽DOM樹結(jié)構變化的事件

它簡單的用法如下：

document.getElementById('list').addEventListener("DOMSubtreeModified", function(){ console.log('列表中子元素被修改'); }, false);

Mutation 事件列表

• DOMAttrModified
• DOMAttributeNameChanged
• DOMCharacterDataModified
• DOMElementNameChanged
• DOMNodeInserted
• DOMNodeRemoved
• DOMNodeInsertedIntoDocument
• DOMSubtreeModified

其中DOMNodeRemoved，DOMNodeInserted 和 DOMSubtreeModified 分別用于 監(jiān)聽元素子項的刪除，新增，修改(包括刪除和新增），
DOMAttrModified 是監(jiān)聽元素屬性的修改，并且能夠提供具體的修改動作。

Mutation Events遇到的問題

• 瀏覽器兼容性問題
  IE9不支持Mutation Events
  Webkit內(nèi)核不支持DOMAttrModified特性，
  DOMElementNameChanged和DOMAttributeNameChanged 在Firefox上不被支持。
• 性能問題
  1.Mutation Events是同步執(zhí)行的，它的每次調(diào)用，都需要從事件隊列中取出事件，執(zhí)行，然后事件隊列中移除，期間需要移動隊列元素。如果事件觸發(fā)的較為頻繁的話，每一次都需要執(zhí)行上面的這些步驟，那么瀏覽器會被拖慢。
  2.Mutation Events本身是事件，所以捕獲是采用的是事件冒泡的形式，如果冒泡捕獲期間又觸發(fā)了其他的MutationEvents的話，很有可能就會導致阻塞Javascript線程，甚至導致瀏覽器崩潰。

Mutation Observer

Mutation Observer 是在DOM4中定義的，用于替代 mutation events 的新API，它的不同于events的是，所有監(jiān)聽操作以及相應處理都是在其他腳本執(zhí)行完成之后異步執(zhí)行的，并且是所以變動觸發(fā)之后，將變得記錄在數(shù)組中，統(tǒng)一進行回調(diào)的，也就是說，當你使用observer監(jiān)聽多個DOM變化時，并且這若干個DOM發(fā)生了變化，那么observer會將變化記錄到變化數(shù)組中，等待一起都結(jié)束了，然后一次性的從變化數(shù)組中執(zhí)行其對應的回調(diào)函數(shù)。

Mutation Observer 的瀏覽器兼容范圍

兼容性

2 方法

構造函數(shù)

用來實例化一個Mutation觀察者對象，其中的參數(shù)是一個回調(diào)函數(shù)，它是會在指定的DOM節(jié)點發(fā)送變化后，執(zhí)行的函數(shù)，并且會被傳入兩個參數(shù)，一個是變化記錄數(shù)組(MutationRecord)，另一個是觀察者對象本身

new MutationObserver(function(records, itself){});

observe

在觀察者對象上，注冊需要觀察的DOM節(jié)點，以及相應的參數(shù)

void observe(Node target, optional MutationObserverInit options)

其中的可選參數(shù) MutationObserverInit的屬性如下：

childLIst 觀察目標節(jié)點的子節(jié)點的新增和刪除。
attributes 觀察目標節(jié)點的屬性節(jié)點(新增或刪除了某個屬性,以及某個屬性的屬性值發(fā)生了變化)。
characterData 如果目標節(jié)點為characterData節(jié)點(一種抽象接口,具體可以為文本節(jié)點,注釋節(jié)點,以及處理指令節(jié)點)時,也要觀察該節(jié)點的文本內(nèi)容是否發(fā)生變化
subtree 觀察目標節(jié)點的所有后代節(jié)點(觀察目標節(jié)點所包含的整棵DOM樹上的上述三種節(jié)點變化)
attributeOldValue 在attributes屬性已經(jīng)設為true的前提下, 將發(fā)生變化的屬性節(jié)點之前的屬性值記錄下來(記錄到下面MutationRecord對象的oldValue屬性中)
characterDataOldValue 在characterData屬性已經(jīng)設為true的前提下,將發(fā)生變化characterData節(jié)點之前的文本內(nèi)容記錄下來(記錄到下面MutationRecord對象的oldValue屬性中)
attributeFilter 一個屬性名數(shù)組(不需要指定命名空間),只有該數(shù)組中包含的屬性名發(fā)生變化時才會被觀察到,其他名稱的屬性發(fā)生變化后會被忽略想要設置那些刪選參數(shù)的話，

如果想要使用哪個參數(shù)的話，就將其值設定為true

disconnect

暫定在觀察者對象上設置的節(jié)點的變化監(jiān)聽，直到重新調(diào)用observe方法

takeRecords

在觀察者對象上調(diào)用takeRecords 會返回 其觀察節(jié)點上的變化記錄(MutationRecord)數(shù)組
其中MutationRecord數(shù)組也會作為，觀察者初始化時的回調(diào)函數(shù)的第一個參數(shù)
其包含的屬性如下：

type 如果是屬性發(fā)生變化,則返回attributes.如果是一個CharacterData節(jié)點發(fā)生變化,則返回characterData,如果是目標節(jié)點的某個子節(jié)點發(fā)生了變化,則返回childList.
target 返回此次變化影響到的節(jié)點,具體返回那種節(jié)點類型是根據(jù)type值的不同而不同的,如果type為attributes,則返回發(fā)生變化的屬性節(jié)點所在的元素節(jié)點,如果type值為characterData,則返回發(fā)生變化的這個characterData節(jié)點.如果type為childList,則返回發(fā)生變化的子節(jié)點的父節(jié)點.
addedNodes 返回被添加的節(jié)點
removedNodes 返回被刪除的節(jié)點
previousSibling 返回被添加或被刪除的節(jié)點的前一個兄弟節(jié)點
nextSibling 返回被添加或被刪除的節(jié)點的后一個兄弟節(jié)點
attributeName 返回變更屬性的本地名稱
oldValue 根據(jù)type值的不同,返回的值也會不同.如果type為attributes,則返回該屬性變化之前的屬性值.如果type為characterData,則返回該節(jié)點變化之前的文本數(shù)據(jù).如果type為childList,則返回null

3 使用實例

// Firefox和Chrome早期版本中帶有前綴 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver // 選擇目標節(jié)點 var target = document.querySelector('#some-id'); // 創(chuàng)建觀察者對象 var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation.type); }); }); // 配置觀察選項: var config = { attributes: true, childList: true, characterData: true } // 傳入目標節(jié)點和觀察選項 observer.observe(target, config); // 隨后,你還可以停止觀察 observer.disconnect();

4 參考鏈接

[1].MDN Mutation Observer
[2].將突變事件和屬性更改事件遷移到突變觀察者

文／falm（簡書作者）
原文鏈接：http://www.jianshu.com/p/b5c9e4c7b1e1
著作權歸作者所有，轉(zhuǎn)載請聯(lián)系作者獲得授權，并標注“簡書作者”。

總結(jié)

以上是生活随笔為你收集整理的MutationObserver 监听DOM树变化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。