使用变更观察器检测 DOM 更改

Paul Kinlan

早在 2000 年，我们就指定了 Mutation Events API，以便开发者轻松响应 DOM 中的更改（例如 DOMNodeRemoved、DOMAttrModified 等）。

虽然 Web 开发者并未广泛使用此功能，但如果他们希望在网页中发生变化时执行某些操作，则可以通过此功能非常方便地使用 Chrome 扩展程序。

虽然更改事件很有用，但同时也会导致一些性能问题。事件运行缓慢，并且以同步方式触发过于频繁，这会导致一些不必要的浏览器 bug。

DOM 变更观察器在 DOM4 规范中推出，将取代变更事件。虽然 Mutation 事件会针对每项更改触发缓慢的事件，但 Mutation 观察器使用可在 DOM 中发生多次更改后传递的回调函数，因此速度更快。

您可以手动处理 API 提供的更改列表，也可以使用 Mutation Summary 等库，这会简化此任务，并提高 DOM 中发生的更改的可靠性。

您可以开始在 Chrome Beta 版中使用 Mutation Observer 来检测 DOM 中的更改，并在该功能推出稳定版（Chrome 18）时做好使用准备。如果您目前使用的是已废弃的更改事件，只需迁移到更改观察器即可。

以下示例展示了如何使用更改事件列出插入的节点：

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