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

Paul Kinlan

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

虽然网络开发者并未广泛使用此功能，但如果他们希望在网页中发生变化时执行某些操作，则可以通过此功能来实现，这对他们来说非常方便，也是一个非常常用的用例。

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

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

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

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

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

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