MutationObserver翻譯過來就是變動(dòng)觀察器十兢，字面上就可以理解這是用來觀察Node（節(jié)點(diǎn)）變化的。MutationObserver是在DOM4規(guī)范中定義的耘擂，它的前身是MutationEvent事件胆剧，該事件最初在DOM2事件規(guī)范中介紹，到來了DOM3事件規(guī)范中正式定義醉冤，但是由于該事件存在兼容性以及性能上的問題被棄用秩霍。

MutationEvent
雖然MutationEvent已經(jīng)被棄用，但是我們還是需要了解它蚁阳，可能你會(huì)為了瀏覽器兼容性的問題而遇到它（萬惡的瀏覽器兼容性）铃绒。

MutationEvent總共有7種事件：DOMNodeInserted、DOMNodeRemoved螺捐、DOMSubtreeModified颠悬、DOMAttrModified矮燎、
DOMCharacterDataModified、DOMNodeInsertedIntoDocument和DOMNodeRemovedFromDocument赔癌。

MutationEvent的兼容性：

MutationEvent在IE瀏覽器中最低支持到IE9
在webkit內(nèi)核的瀏覽器中诞外，不支持DOMAttrModified事件
IE，Edge以及Firefox瀏覽器下不支持DOMNodeInsertedIntoDocument和DOMNodeRemovedFromDocument事件
MutationEvent中的所有事件都被設(shè)計(jì)成無法取消灾票，如果可以取消MutationEvent事件則會(huì)導(dǎo)致現(xiàn)有的DOM接口無法對(duì)文檔進(jìn)行改變峡谊，比如appendChild，remove等添加和刪除節(jié)點(diǎn)的DOM操作刊苍。
MutationEvent中最令人詬病的就是性能以及安全性的問題既们，比如下面這個(gè)例子：

document.addEventListener('DOMNodeInserted', function() {
    var newEl = document.createElement('div');
    document.body.appendChild(newEl);
});

document下的所有DOM添加操作都會(huì)觸發(fā)DOMNodeInserted方法，這時(shí)就會(huì)出現(xiàn)循環(huán)調(diào)用DOMNodeInserted方法正什，導(dǎo)致瀏覽器崩潰贤壁。還有就是MutationEvent是事件機(jī)制，因此會(huì)有一般事件都存在的捕獲和冒泡階段埠忘，此時(shí)如果在捕獲和冒泡階段又對(duì)DOM進(jìn)行了操作會(huì)拖慢瀏覽器的運(yùn)行脾拆。

另一點(diǎn)就是MutationEvent事件機(jī)制是同步的，也就是說每次DOM修改就會(huì)觸發(fā)莹妒，修改幾次就觸發(fā)幾次,嚴(yán)重降低瀏覽器的運(yùn)行名船，嚴(yán)重時(shí)甚至導(dǎo)致線程崩潰

<div id='block'></div>

var i=0;
block.addEventListener('DOMNodeInserted', function(e) {
     i++                                  
});
block.appendChild(docuemnt.createTextNode('1'));
console.log(i)                  //1
block.appendChild(docuemnt.createTextNode('2'));
console.log(i)                  //2
block.appendChild(docuemnt.createTextNode('3'));
console.log(i)                  //3

再看個(gè)例子：

<div id='block'>
  <span id='span'>Text</span>
</div>

block.addEventListener('DOMNodeInserted', function(e) {
     console.log('1');                                  //1
});
span.appendChild(docuemnt.createTextNode('other Text'));

span元素中添加節(jié)點(diǎn)會(huì)觸發(fā)block中的DOMNodeInserted事件，可是你只想觀察block的變化旨怠，不想觀察block中子節(jié)點(diǎn)的變化渠驼，這時(shí)你不得不在DOMNodeInserted事件中進(jìn)行過濾，把對(duì)span的操作忽略掉鉴腻，這無疑增加了操作的復(fù)雜性迷扇。

MutationObserver
MutationObserver的出現(xiàn)就是為了解決MutationEvent帶來的問題。
先看一下MutationObserver的瀏覽器兼容性：

image.png

我們可以看到MutationObserver在IE中最低要就是IE11爽哎，如果你的網(wǎng)站不需要支持IE或者只支持到IE11蜓席，那么你可以放心的使用MutationObserver，否則你可能需要用到上面提到的MutationEvent事件课锌，當(dāng)然如果你的網(wǎng)站還要支持IE8及以下版本厨内，那么你只能和Mutation說拜拜了。

MutationObserver是一個(gè)構(gòu)造器渺贤，接受一個(gè)callback參數(shù)雏胃，用來處理節(jié)點(diǎn)變化的回調(diào)函數(shù)，返回兩個(gè)參數(shù)志鞍，mutations：節(jié)點(diǎn)變化記錄列表（sequence<MutationRecord>）瞭亮，observer：構(gòu)造MutationObserver對(duì)象。

var observe = new MutationObserver(function(mutations,observer){
})

MutationObserver對(duì)象有三個(gè)方法固棚，分別如下：

observe：設(shè)置觀察目標(biāo)统翩，接受兩個(gè)參數(shù)兼丰，target：觀察目標(biāo)，options：通過對(duì)象成員來設(shè)置觀察選項(xiàng)
disconnect：阻止觀察者觀察任何改變
takeRecords：清空記錄隊(duì)列并返回里面的內(nèi)容
關(guān)于observe方法中options參數(shù)有已下幾個(gè)選項(xiàng)：

childList：設(shè)置true唆缴，表示觀察目標(biāo)子節(jié)點(diǎn)的變化，比如添加或者刪除目標(biāo)子節(jié)點(diǎn)黍翎，不包括修改子節(jié)點(diǎn)以及子節(jié)點(diǎn)后代的變化
attributes：設(shè)置true面徽，表示觀察目標(biāo)屬性的改變
characterData：設(shè)置true，表示觀察目標(biāo)數(shù)據(jù)的改變
subtree：設(shè)置為true匣掸，目標(biāo)以及目標(biāo)的后代改變都會(huì)觀察
attributeOldValue：如果屬性為true或者省略趟紊，則相當(dāng)于設(shè)置為true，表示需要記錄改變前的目標(biāo)屬性值碰酝，設(shè)置了attributeOldValue可以省略attributes設(shè)置
characterDataOldValue：如果characterData為true或省略霎匈，則相當(dāng)于設(shè)置為true,表示需要記錄改變之前的目標(biāo)數(shù)據(jù)，設(shè)置了characterDataOldValue可以省略characterData設(shè)置
attributeFilter：如果不是所有的屬性改變都需要被觀察送爸，并且attributes設(shè)置為true或者被忽略铛嘱，那么設(shè)置一個(gè)需要觀察的屬性本地名稱（不需要命名空間）的列表
下表描述了MutationObserver選項(xiàng)與MutationEvent名稱之間的對(duì)應(yīng)關(guān)系：

從上表我們也可以看出相比與MutationEvent而言MutationObserver極大地增加了靈活性，可以設(shè)置各種各樣的選項(xiàng)來滿足程序員對(duì)目標(biāo)的觀察袭厂。

我們簡單看幾個(gè)例子：

<div id='target' class='block' name='target'>
    target的第一個(gè)子節(jié)點(diǎn)
    <p>
       <span>target的后代</span>
    </p>
</div>

1.callback的回調(diào)次數(shù)

var target=document.getElementById('target');
var i=0
var observe=new MutationObserver(function (mutations,observe) {
    i++   
});
observe.observe(target,{ childList: true});
target.appendChild(docuemnt.createTextNode('1'));
target.appendChild(docuemnt.createTextNode('2'));
target.appendChild(docuemnt.createTextNode('3'));
console.log(i)                //1

MutationObserver的callback回調(diào)函數(shù)是異步的墨吓，只有在全部DOM操作完成之后才會(huì)調(diào)用callback。

2.當(dāng)只設(shè)置{ childList: true}時(shí),表示觀察目標(biāo)子節(jié)點(diǎn)的變化

var observe=new MutationObserver(function (mutations,observe) {
    debugger;
    console.log(mutations);
    //observe.discount();     
});

observe.observe(target,{ childList: true});
target.appendChild(document.createTextNode('新增Text節(jié)點(diǎn)'));   //增加節(jié)點(diǎn)纹磺，觀察到變化
target.childNodes[0].remove();                                //刪除節(jié)點(diǎn)帖烘，可以觀察到
target.childNodes[0].textContent='改變子節(jié)點(diǎn)的后代';             //不會(huì)觀察到

如果想要觀察到子節(jié)點(diǎn)以及后代的變化需設(shè)置{childList: true, subtree: true}

attributes選項(xiàng)用來觀察目標(biāo)屬性的變化，用法類似與childList,目標(biāo)屬性的刪除添加以及修改都會(huì)被觀察到橄杨。

3.我們需要注意的是characterData這個(gè)選項(xiàng)秘症，它是用來觀察CharacterData類型的節(jié)點(diǎn)的，只有在改變節(jié)點(diǎn)數(shù)據(jù)時(shí)才會(huì)觀察到式矫，如果你刪除或者增加節(jié)點(diǎn)都不會(huì)進(jìn)行觀察乡摹，還有如果對(duì)不是CharacterData類型的節(jié)點(diǎn)的改變不會(huì)觀察到，比如：

observe.observe(target,{ characterData: true, subtree: true});
target.childNodes[0].textContent='改變Text節(jié)點(diǎn)';              //觀察到
target.childNodes[1].textContent='改變p元素內(nèi)容';              //不會(huì)觀察到
target.appendChild(document.createTextNode('新增Text節(jié)點(diǎn)'));  //不會(huì)觀察到
target.childNodes[0].remove();                               //刪除TEXT節(jié)點(diǎn)也不會(huì)觀察到
我們只需要記住只有對(duì)CharacterData類型的節(jié)點(diǎn)的數(shù)據(jù)改變才會(huì)被characterData為true的選項(xiàng)所觀察到采转。

4.最后關(guān)注一個(gè)特別有用的選項(xiàng)attributeFilter趟卸，這個(gè)選項(xiàng)主要是用來篩選要觀察的屬性，比如你只想觀察目標(biāo)style屬性的變化氏义，這時(shí)可以如下設(shè)置：

observe.observe(target,{ attributeFilter: ['style'], subtree: true});
target.style='color:red'; //可以觀察到
target.removeAttribute('name'); //刪除name屬性锄列，無法觀察到
disconnect方法是用來阻止觀察的，當(dāng)你不再想觀察目標(biāo)節(jié)點(diǎn)的變化時(shí)可以調(diào)用observe.disconnect()方法來取消觀察惯悠。

takeRecords方法是用來取出記錄隊(duì)列中的記錄邻邮。它的一個(gè)作用是，比如你對(duì)一個(gè)節(jié)點(diǎn)的操作你不想馬上就做出反應(yīng)克婶，過段時(shí)間在顯示改變了節(jié)點(diǎn)的內(nèi)容筒严。

var observe=new MutationObserver(function(){});
observe.observe(target,{ childList: true});
target.appendChild(document.createTextNode('新增Text節(jié)點(diǎn)'));
var record = observe.takeRecords();              //此時(shí)record保存了改變記錄列表  
//當(dāng)調(diào)用takeRecords方法時(shí)丹泉，記錄隊(duì)列被清空因此不會(huì)觸發(fā)MutationObserver中的callback回調(diào)方法。
target.appendChild(document.createElement('span'));
observe.disconnect();                            //停止對(duì)target的觀察鸭蛙。
//MutationObserver中的回調(diào)函數(shù)只有一個(gè)記錄摹恨，只記錄了新增span元素

//之后可以對(duì)record進(jìn)行操作
//...

MutationRecord
變動(dòng)記錄中的屬性如下：

1.type：如果是屬性變化，返回"attributes"娶视，如果是一個(gè)CharacterData節(jié)點(diǎn)（Text節(jié)點(diǎn)晒哄、Comment節(jié)點(diǎn)）變化，返回"characterData"肪获，節(jié)點(diǎn)樹變化返回"childList"
2.target：返回影響改變的節(jié)點(diǎn)
3.addedNodes：返回添加的節(jié)點(diǎn)列表
4.removedNodes：返回刪除的節(jié)點(diǎn)列表
5.previousSibling：返回分別添加或刪除的節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn)寝凌，否則返回null
6.nextSibling：返回分別添加或刪除的節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)，否則返回null
7.attributeName：返回已更改屬性的本地名稱孝赫，否則返回null
8.attributeNamespace：返回已更改屬性的名稱空間较木，否則返回null
9.oldValue：返回值取決于type。對(duì)于"attributes"青柄，它是更改之前的屬性的值伐债。對(duì)于"characterData"，它是改變之前節(jié)點(diǎn)的數(shù)據(jù)致开。對(duì)于"childList"泳赋，它是null
其中 type、target這兩個(gè)屬性不管是哪種觀察方式都會(huì)有返回值喇喉，其他屬性返回值與觀察方式有關(guān)祖今，比如只有當(dāng)attributeOldValue或者characterDataOldValue為true時(shí)oldValue才有返回值，只有改變屬性時(shí)拣技，attributeName才有返回值等千诬。

原作者：fanqifeng
原文地址：https://segmentfault.com/a/1190000012787829