526互联

js 浏览器的5种observer 第一种 MutationObserver 详解及使用方法

发布时间 2023-09-12 18:44:41作者: 完美前端

 

MutationObserver 提供了监听 DOM 树变化的能力。从简单的 UI 变更追踪到复杂的 SPA 页面变化都有涉及。 可以追踪 DOM 树的变化，包括节点的增加、删除、属性的修改等。它是异步的，这意味着它会将所有的 DOM 变化集合起来一次性报告，而不是在每一次变化后立刻报告。

兼容性

MutationObserver在现代浏览器中得到了很好的支持。它在 Chrome 26+、Firefox 14+、IE 11+、Opera 15+ 和 Safari 6.1+ 中可用。

为了在旧版本的浏览器中实现相似的功能，开发者可能需要使用轮询技巧或者使用第三方库。

查看完整的兼容性表格

如何使用

const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        console.log(mutation.type);
    });
});

// 配置观察器选项
const config = {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
};

// 传入目标节点和观察选项
observer.observe(document.body, config);

// 最后，可以随时停止观察
// observer.disconnect();

// 这段代码创建了一个新的 `MutationObserver`，用于监听 `document.body` 上的变化。

// 它将追踪子节点变化、属性变化、文本内容变化等，并在这些变化发生时输出变化的类型。