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