MutationObserver 监视DOM树变化

最新推荐文章于 2025-06-06 13:58:36 发布

原创最新推荐文章于 2025-06-06 13:58:36 发布 · 264 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

API 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了MutationObserver API的基本用法及配置选项，该API能够帮助开发者监控DOM树的变化情况，适用于现代浏览器。文章通过示例代码展示了如何创建观察器、指定观察目标以及设置观察参数。

前言：

MutationObserver是新的API，提供了监视DOM树变化的能力，浏览器兼容性也不错（https://caniuse.com/?search=MutationObserver）。Mutation Events也是可以用来监视DOM树变化，因为性能较差，现在已经不推荐使用。

使用：

// 获取被检测的DOM元素
const targetNode = document.getElementById('target')

// 定义DOM树变化后的回调
const callBack = (mutationsList, observer) => {
  // mutationsList所有的变化信息
  // observer观察器
  for (const mutation of mutationsList) {
    //
  }
}

// 配置项
// attributes：设为 true 以观察受监视元素的属性值变更
// childList：设为 true 以监视目标节点（如果 subtree 为 true，则包含子孙节点）添加或删除新的子节点
// subtree：设为 true 以将监视范围扩展至目标节点整个节点树中的所有节点
// childList，attributes 或者 characterData 三个属性之中，至少有一个必须为 true，否则会抛出 TypeError 异常
const config = { attributes: false, childList: true, subtree: false }

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callBack)

// 开始观察
observer.observe(targetNode, config)

// 停止观察
observer.disconnect()