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

Paul Kinlan

在 2000 年，Mutation Events API 已指定，方便開發人員輕鬆回應 DOM 中的變更 (例如 DOMNodeRemoved、DOMAttrModified 等)。

雖然這項功能並未廣泛應用於網頁開發，但如果開發人員想在網頁內容變更時執行某些動作，這項功能就會提供非常方便且實用的 Chrome 擴充功能用途。

雖然突變事件很實用，但同時也會造成一些效能問題。事件速度緩慢，且以同步方式過度頻繁地觸發，導致一些不必要的瀏覽器錯誤。

DOM 變異觀察器是 DOM4 規格中引入的概念，將取代變異事件。雖然 Mutation 事件會為每項變更觸發緩慢的事件，但 Mutation 觀察器會使用回呼函式，在 DOM 中發生多次變更後傳送，因此速度更快。

您可以手動處理 API 提供的變更清單，或是使用 Mutation Summary 等程式庫，讓這項工作更輕鬆，並提高 DOM 中變更的可靠度。

您可以開始在 Chrome Beta 版中使用突變觀察器，以便偵測 DOM 中的變更，並在穩定版 (Chrome 18) 推出時使用這項功能。如果您目前使用已淘汰的 Mutation Events，請改用 Mutation Observer。

以下是使用突變事件列出插入節點的範例：

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

以下是使用 Mutation Observer 的效果：

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