MutationObserver是监听页面DOM变化的高效API，通过new MutationObserver(callback)创建实例并调用observe()方法监听目标节点，支持childList、subtree、attributes等配置项，可精准监控节点增删、属性或文本变化，适用于广告拦截、表单监控、内容加载检测等场景，使用后需调用disconnect()避免内存泄漏。
MutationObserver 是 JavaScript 提供的一个强大 API，用于监听 DOM 树的变化。相比旧的 Mutation Events，它性能更好、更灵活，适合在现代 Web 开发中监控元素的增删、属性修改、文本内容变更等场景。
基本用法
MutationObserver 通过构造函数创建实例，并传入一个回调函数。当监听的 DOM 发生变化时，该回调会被异步触发。
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
console.log('变化类型:', mutation.type);
if (mutation.type === 'childList') {
console.log('新增节点:', mutation.addedNodes);
console.log('删除节点:', mutation.removedNodes);
}
});
});
创建观察者后，需要调用 observe() 方法指定目标节点和配置项：
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
characterData: true
});
常用配置选项
observe() 的第二个参数是一个配置对象，用来精确控制监听范围：
立即学习“Java免费学习笔记（深入）”；
- childList: 监听目标节点的子节点增删
- subtree: 是否递归监听所有后代节点
- attributes: 监听属性值变化（如 class、style）
- characterData: 监听文本内容变化
- attributeFilter: 指定监听的具体属性名数组，例如 ['class', 'style']
- attributeOldValue: 记录属性旧值
- characterDataOldValue: 记录文本旧值
合理设置这些选项可以避免不必要的回调，提升性能。
实际应用场景
MutationObserver 常用于以下情况：
- 第三方脚本动态插入广告或弹窗时，自动移除特定元素
- 监控表单字段是否被 JS 修改
- 检测页面内容加载完成（如 SPA 中某些组件异步渲染）
- 实现自定义的 DOM 变化日志或调试工具
例如，监听某个容器内是否有新元素插入并做处理：
const target = document.getElementById('list-container');
const observer = new MutationObserver(() => {
console.log('列表已更新');
// 执行重新绑定事件、刷新样式等操作
});
observer.observe(target, { childList: true });
停止监听
使用完后应手动断开连接，防止内存泄漏：
- observer.disconnect(): 停止所有监听
- observer.takeRecords(): 获取尚未处理的变动记录，常用于清理前收尾
通常在组件销毁或页面跳转前调用 disconnect()。
基本上就这些。MutationObserver 虽然功能强大，但也不宜滥用，只在真正需要响应 DOM 变化时才使用。正确配置能有效减少性能损耗。
