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

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

此功能并未被网络开发者广泛使用,但对于 Chrome 扩展程序,当他们想在页面内容发生变化时执行某项操作时,这是一个非常方便且热门的应用场景。

变更事件很有用,但同时也会导致一些性能问题。事件速度很慢,并且以同步方式过于频繁地触发事件,从而导致一些意外的浏览器错误。

DOM4 规范中引入的 DOM 变更观察者将取代变更事件。变更事件会针对每一次更改触发缓慢事件,而变更观察者使用可在 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);