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);