MutationObserver详解
MutationObserver用來監(jiān)視 DOM 變動。DOM 的任何變動，比如節(jié)點(diǎn)的增減、屬性的變動、文本內(nèi)容的變動都會觸發(fā)MutationObserver事件。
但是，它與事件有一個本質(zhì)不同：事件是同步觸發(fā)，也就是說，DOM 的變動立刻會觸發(fā)相應(yīng)的事件；Mutation Observer 則是異步觸發(fā)，DOM 的變動并不會馬上觸發(fā)，而是要等到當(dāng)前所有 DOM 操作都結(jié)束才觸發(fā)。
Mutation Observer 有以下特點(diǎn)：
- 它等待所有腳本任務(wù)完成后，才會運(yùn)行（即異步觸發(fā)方式）。
- 它把 DOM 變動記錄封裝成一個數(shù)組進(jìn)行處理，而不是一條條個別處理 DOM 變動。
- 它既可以觀察 DOM 的所有類型變動，也可以指定只觀察某一類變動。
MutationObserver 構(gòu)造函數(shù)
var observer = new MutationObserver(function (mutationRecoards, observer) {// mutationRecoards變動數(shù)組// observer 觀察者實(shí)例 });構(gòu)造函數(shù)接收一個回調(diào)函數(shù)，回調(diào)函數(shù)有兩個參數(shù)，一個變動數(shù)組，第二個是觀察者實(shí)例。
MutationObserver 的實(shí)例方法
1. observe(node, config)
啟動監(jiān)聽，它接受兩個參數(shù)。
第一個參數(shù)：所要觀察的 DOM 節(jié)點(diǎn)
第二個參數(shù)：一個配置對象，指定所要觀察的特定變動
配置對象如下：
- childList：子節(jié)點(diǎn)的變動（指新增，刪除或者更改）。
- attributes：屬性的變動。
- characterData：節(jié)點(diǎn)內(nèi)容或節(jié)點(diǎn)文本的變動。
- subtree：布爾值，表示是否將該觀察器應(yīng)用于該節(jié)點(diǎn)的所有后代節(jié)點(diǎn)。
- attributeOldValue：布爾值，表示觀察attributes變動時，是否需要記錄變動前的屬性值。
- characterDataOldValue：布爾值，表示觀察characterData變動時，是否需要記錄變動前的值。
- attributeFilter：數(shù)組，表示需要觀察的特定屬性（比如[‘class’,‘src’]）。
對一個節(jié)點(diǎn)添加觀察器，就像使用addEventListener方法一樣，多次添加同一個觀察器是無效的，回調(diào)函數(shù)依然只會觸發(fā)一次。但是，如果指定不同的options對象，就會被當(dāng)作兩個不同的觀察器。
2. disconnect()
disconnect方法用來停止觀察。調(diào)用該方法后，DOM 再發(fā)生變動，也不會觸發(fā)觀察器。
3. takeRecords()
用來清除變動記錄，即不再處理未處理的變動。該方法返回變動記錄的數(shù)組。
MutationRecord 對象
DOM 每次發(fā)生變化，就會生成一條變動記錄（MutationRecord 實(shí)例）。該實(shí)例包含了與變動相關(guān)的所有信息。Mutation Observer 處理的就是一個個MutationRecord實(shí)例所組成的數(shù)組。
MutationRecord對象包含了DOM的相關(guān)信息，有如下屬性:
- type：觀察的變動類型（attribute、characterData或者childList）。
- target：發(fā)生變動的DOM節(jié)點(diǎn)。
- addedNodes：新增的DOM節(jié)點(diǎn)。
- removedNodes：刪除的DOM節(jié)點(diǎn)。
- previousSibling：前一個同級節(jié)點(diǎn)，如果沒有則返回null。
- nextSibling：下一個同級節(jié)點(diǎn)，如果沒有則返回null。
- attributeName：發(fā)生變動的屬性。如果設(shè)置了attributeFilter，則只返回預(yù)先指定的屬性。
- oldValue：變動前的值。這個屬性只對attribute和characterData變動有效，如果發(fā)生childList變動，則返回null。
例子
<div id="container"><div class="child"></div></div><button id="update">改變</button><script>var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserverconst container = document.getElementById('container')const button = document.getElementById('update')const options = {attributes: true,childList: true,}// 創(chuàng)建MutationObserver實(shí)例，返回一個觀察者對象const mutation = new MutationObserver(function(mutationRecoards, observer) {console.log(mutationRecoards)console.log(observer)})// 對觀察者添加需要觀察的元素，并設(shè)置需要觀察元素的哪些方面mutation.observe(container, options);// 對container進(jìn)行操作button.addEventListener('click', function() {container.innerText = '這是文本'; // 內(nèi)容改變container.style.background = 'red'; // 屬性改變for (let i = 0; i < 3; i++) { // 子節(jié)點(diǎn)container.appendChild(document.createElement('div'))}})</script>參考
Mutation Observer API
總結(jié)
以上是生活随笔為你收集整理的MutationObserver详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 判断是否是数组的方法
- 下一篇： es6-promise源码重点分析难点解