[`MutationObserver`](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver)接口提供了監視對DOM樹所做更改的能力。它被設計為舊的Mutation Events功能的替代品，該功能是DOM3 Events規范的一部分 ## 構造函數 [`MutationObserver()`](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver/MutationObserver) 創建并返回一個新的?`MutationObserver`?它會在指定的DOM發生變化時被調用。 ## 方法 [`disconnect()`](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver/disconnect) `阻止?MutationObserver`?實例繼續接收的通知，直到再次調用其[`observe()`](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver/observe)方法，該觀察者對象包含的回調函數都不會再被調用。 [`observe()`](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver/observe) 配置`MutationObserver`在DOM更改匹配給定選項時，通過其回調函數開始接收通知。 [`takeRecords()`](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver/takeRecords) 從MutationObserver的通知隊列中刪除所有待處理的通知，并將它們返回到[`MutationRecord`](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationRecord)對象的新[`Array`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Array)中。 例子： ~~~js // 選擇需要觀察變動的節點 const targetNode = document.getElementById('some-id'); // 觀察器的配置（需要觀察什么變動） const config = { attributes: true, childList: true, subtree: true }; // 當觀察到變動時執行的回調函數 const callback = function(mutationsList, observer) { // Use traditional 'for loops' for IE 11 for(let mutation of mutationsList) { if (mutation.type === 'childList') { console.log('A child node has been added or removed.'); } else if (mutation.type === 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.'); } } }; // 創建一個觀察器實例并傳入回調函數 const observer = new MutationObserver(callback); // 以上述配置開始觀察目標節點 observer.observe(targetNode, config); // 之后，可停止觀察 observer.disconnect(); ~~~