1、概述
Mutation Observer API 用來監視 DOM 變動。DOM 的任何變動,比如節點的增減、屬性的變動、文本內容的變動,這個 API 都可以得到通知。
概念上,它很接近事件,可以理解爲 DOM 發生變動就會觸發 Mutation Observer 事件。但是,它與事件有一個本質不同:事件是同步觸發,也就是說,DOM 的變動立刻會觸發相應的事件;Mutation Observer 則是異步觸發,DOM 的變動並不會馬上觸發,而是要等到當前所有 DOM 操作都結束才觸發。
這樣設計是爲了應付 DOM 變動頻繁的特點。舉例來說,如果文檔中連續插入1000個
元素,就會連續觸發1000個插入事件,執行每個事件的回調函數,這很可能造成瀏覽器的卡頓;而 Mutation Observer 完全不同,只在1000個段落都插入結束後纔會觸發,而且只觸發一次。
Mutation Observer 有以下特點。
- > 它等待所有腳本任務完成後,纔會運行(即異步觸發方式)。
- > 它把 DOM 變動記錄封裝成一個數組進行處理,而不是一條條個別處理 DOM 變動。
- > 它既可以觀察 DOM 的所有類型變動,也可以指定只觀察某一類變動。
2、應用示例 (監聽子元素的變動)
var callback = function (records){
records.map(function(record){
console.log('Mutation type: ' + record.type);
console.log('Mutation target: ' + record.target);
});
};
var mo = new MutationObserver(callback);
var option = {
'childList': true,
'subtree': true
};
mo.observe(document.body, option);