MutationObserver 是现代浏览器监听 DOM 变化的首选方案，通过实例化、observe 配置和 disconnect 控制，支持 childList、attributes、characterData 等类型监听，需注意避免修改触发循环及兼容性问题。

MutationObserver 是现代浏览器中监听 DOM 节点变化的首选方式，比老式的 DOMSubtreeModified 等事件更高效、可控，且不会触发重排重绘。

MutationObserver 基本用法

创建一个观察者实例，传入回调函数，再调用 observe() 方法指定目标节点和监听选项：

• 回调函数接收两个参数：变化记录列表（mutationsList）和观察者实例（observer）
• observe() 的第二个参数是配置对象，决定监听哪些变化类型
• 必须手动调用 disconnect() 停止监听，否则会持续占用资源

监听常见节点变化类型

通过配置对象控制监听范围，常用选项包括：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• childList: true — 监听子节点增删（如 appendChild、removeChild）
• subtree: true — 同时监听后代节点（配合 childList 使用效果更全）
• attributes: true — 监听属性变更（如 class、id、data-*）
• attributeFilter: ['class', 'style'] — 限定只监听特定属性
• characterData: true — 监听文本节点内容变化（需配合 subtree 或直接观察 Text 节点）

处理 MutationRecord 实际变化

每个 MutationRecord 对象包含 type、target、addedNodes、removedNodes、oldValue 等字段，可根据 type 分类处理：

立即学习“Java免费学习笔记（深入）”；

• type === 'childList'：检查 addedNodes 和 removedNodes 列表，遍历判断是否含目标元素
• type === 'attributes'：用 target.getAttribute(attrName) 获取新值，oldValue 是旧值（需开启 attributeOldValue: true）
• type === 'characterData'：target 是 Text 节点，用 target.textContent 读取当前内容

实用技巧与注意事项

避免常见坑，让监听更稳定可靠：

• 观察动态插入的节点时，优先观察父容器并设 subtree: true，而非等节点出现后再 observe
• 回调中不要直接修改被观察的 DOM，否则可能引发无限循环；如需响应后修改，可用 setTimeout(() => {}, 0) 或 queueMicrotask
• 多次 observe 同一节点不会报错，但会覆盖前一次配置；如需更新配置，先 disconnect() 再重新 observe
• 注意兼容性：IE 完全不支持，Edge 12+、Chrome 26+、Firefox 14+、Safari 6+ 支持良好