无需登录 数据私有 本地保存

DOM变动观察器 - 监听节点变化

9
0
0
0
观察类型：
子节点变化 属性变化 文本变化 子树监听 属性旧值 文本旧值
0
总变化次数
0
子节点变化
0
属性变化
0
文本变化
变化日志
全部 子节点 属性 文本

暂无变化记录

配置目标选择器并点击"开始观察"

常见问题与知识点

MutationObserver 是浏览器原生提供的 API，用于监听 DOM 树的变化。它可以检测到子节点的添加和删除、元素属性的修改、文本内容的变化等。与已废弃的 Mutation Events 相比，MutationObserver 是异步触发的，采用批量处理机制，性能更好，不会阻塞页面渲染。它广泛应用于前端框架的底层实现、浏览器扩展开发、UI 自动化测试等场景。

  • childList：监听目标节点的直接子节点的添加和删除。
  • attributes：监听目标节点属性的变化（如 class、style、data-* 等）。
  • characterData：监听文本节点或注释节点的内容变化。
  • subtree：将监听范围扩展到目标节点的整个子树（所有后代节点）。如果不开启，仅监听目标节点本身。
  • attributeOldValue：记录属性变化前的旧值（需同时开启 attributes）。
  • characterDataOldValue：记录文本变化前的旧值（需同时开启 characterData）。

在回调函数中修改 DOM 可能会再次触发 MutationObserver，导致无限循环。解决方法是：在修改 DOM 前调用 observer.disconnect() 暂时断开观察，修改完成后再重新连接。或者在回调中使用标志位（flag）来判断当前变化是否由自身操作引起，若是则跳过处理。本工具的高亮功能就采用了暂时断开观察的策略来避免循环。

MutationObserver 采用异步批量处理机制，浏览器会将多个 DOM 变化合并为一次回调，因此性能开销很小。但如果监听的范围过大（如对整个 body 开启 subtree），且页面 DOM 操作频繁，可能会产生较多的回调。建议尽量缩小监听范围，仅监听必要的节点，并在不需要时及时断开观察。

  • 前端框架底层：Vue、React 等框架在开发模式下可用其检测 DOM 变化。
  • 浏览器扩展：监听网页内容变化，实现自动填充、广告屏蔽等功能。
  • UI 自动化测试：等待特定 DOM 状态出现后再执行断言。
  • 懒加载：监听容器变化，动态加载新出现的内容（如图片）。
  • 富文本编辑器：实时感知用户编辑造成的 DOM 变化。
  • SEO 审计工具：检测页面 DOM 的动态修改情况。
🔧 相关工具