MutationObserver 是监听 DOM 变化的标准高效方式，支持 childList、subtree、attributes 等选项配置，需用 disconnect() 停止监听，回调异步批量执行且避免在其中修改被观察 DOM。
MutationObserver 是 JavaScript 中监听 DOM 变化的标准方式，比旧的 DOMSubtreeModified 等事件更高效、可控，且不会导致性能问题或重复触发。
一、基本用法：创建并启动观察器
先创建一个 MutationObserver 实例，传入回调函数；再调用 observe() 方法指定目标节点和观察选项：
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
console.log('变化类型:', mutation.type);
console.log('新增节点:', mutation.addedNodes);
console.log('移除节点:', mutation.removedNodes);
console.log('属性变化:', mutation.attributeName);
});
});
// 观察 body 元素及其子树
observer.observe(document.body, {
childList: true, // 监听子节点增删
subtree: true, // 同时观察后代节点
attributes: true, // 监听属性变化
attributeFilter: ['class', 'id'], // 只关注特定属性
});
二、常用观察选项说明
这些配置决定哪些变化会被捕获：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- childList: true — 监听直接子节点的添加或删除（不包括文本内容变化）
-
subtree: true — 扩展监听到整个后代树（通常与
childList搭配使用） -
attributes: true — 监听元素属性变更（如
class、style） -
characterData: true — 监听文本节点内容变化（如
textContent修改） -
attributeOldValue: true — 在回调中拿到属性旧值（需配合
attributes: true） - characterDataOldValue: true — 同理，获取文本旧值
三、停止和重新开始监听
避免内存泄漏或重复监听，记得适时控制生命周期：
立即学习“Java免费学习笔记（深入）”；
-
observer.disconnect()— 完全停止监听，但保留配置，可再次调用observe() -
observer.takeRecords()— 清空并返回尚未处理的待处理变化列表（常用于暂停期间缓存） - 若要彻底销毁，直接让 observer 变量被垃圾回收即可（确保无其他引用）
四、实用技巧与注意事项
真实开发中容易踩坑，注意以下几点：
- 回调是异步延迟触发的（类似微任务），不会阻塞 DOM 渲染
- 多次同步 DOM 修改会合并为一次回调（批量处理，性能友好）
- 不要在回调里直接修改被观察的 DOM，否则可能引发无限循环（如添加节点又触发
childList） - 若只关心某一个元素，优先观察该元素本身，而非
document.body，减少不必要的开销 - 动态插入的元素，只要父级已开启
subtree: true，也能被监听到
