1. 作用

MutationObserverAPI可以看作一個(gè)監(jiān)聽(tīng)DOM所有變化（包含節(jié)點(diǎn)、屬性、文本內(nèi)容的變動(dòng)）的接口。

和EventTargetAPI的addEventListener相比：

共同點(diǎn): 兩者的回調(diào)函數(shù)執(zhí)行都是異步任務(wù)，都要在主執(zhí)行棧之后執(zhí)行；

不同點(diǎn)：

1. addEventListener的回調(diào)函數(shù)會(huì)進(jìn)入宏任務(wù)隊(duì)列；

MutationObserver的回調(diào)函數(shù)會(huì)進(jìn)入微任務(wù)隊(duì)列

2.addEventListener的觸發(fā)方式是同步觸發(fā)；比如，點(diǎn)擊后，回調(diào)函數(shù)立即進(jìn)入宏任務(wù)隊(duì)列。

MutationObserver的監(jiān)聽(tīng)是異步觸發(fā)，在所有的DOM操作完成后才觸發(fā)使回調(diào)函數(shù)進(jìn)入微任務(wù)隊(duì)列。

比如，程序中有10個(gè)修改DOM的操作，只有在第十個(gè)處理完之后，回調(diào)函數(shù)才進(jìn)入微任務(wù)隊(duì)列。

    const observer = new MutationObserver(function (mutations, observer) {
      console.log(mutations);//[{type: 'childList',.....}]
    })
    observer.observe(root, {
      childList: true,
      subtree: true
    })
    const p = Promise.resolve();
    root.appendChild(document.createElement('div')); 
    // DOM操作執(zhí)行完成，觸發(fā)觀察回調(diào)
    p.then(() => {
      console.log('d')
    })
// 運(yùn)行結(jié)果
d
[{type:  .......}]

2. 使用

MutationObserver，顧名思義，是變化觀察器。它是一個(gè)構(gòu)造函數(shù)，使用時(shí)需要?jiǎng)?chuàng)建實(shí)例對(duì)象，生成一個(gè)觀察器。

// callback是監(jiān)聽(tīng)回調(diào)函數(shù)，當(dāng)主執(zhí)行棧結(jié)束后觸發(fā)
// 第一個(gè)參數(shù)是所有變化產(chǎn)生的變化對(duì)象的一個(gè)數(shù)組，第二個(gè)參數(shù)是觀察器本身
const observer = new MutationObserver(function(mutations, observer) {
});

DOM變化會(huì)產(chǎn)生一條變化記錄，它是一個(gè)MutationRecord對(duì)象的實(shí)例。

上面的mutations是MutationRecord實(shí)例對(duì)象的一個(gè)集合。

它包含以下屬性：

target: 當(dāng)前變化的節(jié)點(diǎn)
type: 變化類(lèi)型；包含charactorData,childList, attributes三種
addNodes: 新增的節(jié)點(diǎn)； 默認(rèn)[]
removeNodes: 刪除的節(jié)點(diǎn);默認(rèn)[]
previousSibling: 前一個(gè)同級(jí)節(jié)點(diǎn)； 默認(rèn)null
nextSiblings: 后一個(gè)同級(jí)節(jié)點(diǎn)；默認(rèn)null
attributeName: 發(fā)生變化的屬性
oldValue: 變化前的值

MutationObserver.prototype.observe是一個(gè)實(shí)例方法，用來(lái)啟動(dòng)監(jiān)聽(tīng)器，并指定監(jiān)聽(tīng)對(duì)象，設(shè)置監(jiān)聽(tīng)參數(shù)。

所以該方法的調(diào)用一定要在所有的DOM操作的最上方，否則監(jiān)聽(tīng)不到變化。

observer.observer(element, options);

element:

監(jiān)聽(tīng)的DOM對(duì)象

options：

指定觀察的具體內(nèi)容：（3個(gè)至少指定一個(gè)，否則報(bào)錯(cuò)）對(duì)應(yīng)的值都是布爾值。

1. childList (子節(jié)點(diǎn))

還有對(duì)應(yīng)該配置的補(bǔ)充配置：subtree，指定是否是所有的后代節(jié)點(diǎn)

2. attributes (屬性)

還有對(duì)應(yīng)該配置的補(bǔ)充配置：

attributeOldValue:指定是否記錄觀察前的屬性值

attributeFilter: 一個(gè)數(shù)組，指定觀察的屬性值

3. charactorData(節(jié)點(diǎn)內(nèi)容)

還有對(duì)應(yīng)該配置的補(bǔ)充配置：

charactorDataOldValue： 指定是否記錄變化前的節(jié)點(diǎn)內(nèi)容

示例：

  <div id="root"></div>
  <script type="module">
    const observer = new MutationObserver(function (mutations, observer) {
      console.log(mutations);//[{type: 'childList',.....}]
    })
    observer.observe(root, {
      childList: true,
      subtree: true
    })
    root.appendChild(document.createElement('div'))
  </script>

3. 實(shí)例方法

1.disconnect()

該方法調(diào)用后，關(guān)閉監(jiān)聽(tīng)

2.takeRecords()

刪除未處理的變化

4. 應(yīng)用

1. 觀察節(jié)點(diǎn)和屬性的變化

2.取代DOMContentLoaded事件

總結(jié)

以上是生活随笔為你收集整理的MutationObserverAPI--微任务的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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