摘要：的出現(xiàn)就是為了解決帶來的問題。對(duì)于，它是其中這兩個(gè)屬性不管是哪種觀察方式都會(huì)有返回值，其他屬性返回值與觀察方式有關(guān)，比如只有當(dāng)或者為時(shí)才有返回值，只有改變屬性時(shí)，才有返回值等。

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

雖然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)致線程崩潰

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è)例子：

  Text

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

我們可以看到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），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)的觀察。

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

    target的第一個(gè)子節(jié)點(diǎn)
    

       target的后代
    

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)記錄中的屬性如下：

type：如果是屬性變化，返回"attributes"，如果是一個(gè)CharacterData節(jié)點(diǎn)（Text節(jié)點(diǎn)、Comment節(jié)點(diǎn)）變化，返回"characterData"，節(jié)點(diǎn)樹變化返回"childList"

target：返回影響改變的節(jié)點(diǎn)

addedNodes：返回添加的節(jié)點(diǎn)列表

removedNodes：返回刪除的節(jié)點(diǎn)列表

previousSibling：返回分別添加或刪除的節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn)，否則返回null

nextSibling：返回分別添加或刪除的節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)，否則返回null

attributeName：返回已更改屬性的本地名稱，否則返回null

attributeNamespace：返回已更改屬性的名稱空間，否則返回null

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才有返回值等。