使用異動觀察器偵測 DOM 變更

Paul Kinlan

自 2000 年起，我們已指定 MutationEvents API 讓開發人員可以輕鬆回應 DOM 中的變化 (例如 DOMNodeRemoved、DOMAttrModified 等)。

這項功能雖不普及，但網頁程式開發人員還不太能使用這項功能，但如果想在頁面內容變更時執行某些動作，Chrome 擴充功能便是相當方便的用途。

異動事件雖然實用，但同時會造成一些效能問題。事件速度較慢，而且太常以同步方式觸發，因此造成某些非預期的瀏覽器錯誤。

自 DOM4 規格推出，DOM Mutation Observers 將取代異動事件。雖然每次變更都會觸發緩慢事件，但 Mutation Observer 可以比較快使用回呼函式，函式可以在 DOM 中進行多次變更。

您可以手動處理 API 提供的變更清單，或是使用程式庫 (例如 Mutation 摘要) 簡化這項工作，並為 DOM 中發生的變更增加可靠性。

您可以開始使用 Chrome Beta 版「Mutation Observers」來偵測 DOM 中的變更，並在穩定版上使用此功能 (Chrome 18)。如果您目前正在使用已淘汰的 Mutation 事件，請直接遷移至 Mutation Observers。

以下範例說明如何透過異動事件列出插入的節點：

var insertedNodes = [];
document.addEventListener("DOMNodeInserted", function(e) {
    insertedNodes.push(e.target);
}, false);
console.log(insertedNodes);

「Mutation Observers」會如下所示：

var insertedNodes = [];
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
    for (var i = 0; i < mutation.addedNodes.length; i++)
        insertedNodes.push(mutation.addedNodes[i]);
    })
});
observer.observe(document.documentElement, { childList: true });
console.log(insertedNodes);