MutationObserver是现代浏览器用于监听DOM变化的API，性能优于废弃的Mutation Events。通过构造函数创建实例并传入回调函数，可捕获节点增删、属性修改等变动。回调接收MutationRecord数组和观察器实例，每项记录包含变动类型、新增/删除节点、属性名及旧值等信息。调用observe()方法指定目标元素和配置项（如childList、subtree、attributes等）启动监听。适用于动态内容场景，如自动绑定事件、监控第三方脚本插入或单页应用内容更新。使用disconnect()停止监听以避免内存泄漏，或调用takeRecords()获取未处理记录。应合理使用，防止过度监听影响性能。
Mutation Observer 是现代浏览器提供的 API，用于监听 DOM 树的动态变化。相比已废弃的 Mutation Events，它性能更好、更灵活。只要 DOM 发生变动——比如节点添加、属性修改、文本内容改变——你都可以及时捕获并做出响应。
创建 MutationObserver 实例
使用 MutationObserver 构造函数创建观察器，传入一个回调函数。这个回调会在每次检测到指定类型的 DOM 变化时被触发。
回调接收两个参数：一个是 MutationRecord 对象数组（每项记录一次变更），另一个是观察器实例本身。
示例：
const observer = new MutationObserver((mutations, obs) => {
mutations.forEach(mutation => {
console.log('变动类型:', mutation.type);
if (mutation.type === 'childList') {
console.log('新增节点:', mutation.addedNodes);
console.log('删除节点:', mutation.removedNodes);
}
if (mutation.type === 'attributes') {
console.log('属性名:', mutation.attributeName);
console.log('旧值:', mutation.oldValue);
}
});
});配置观察选项
调用 observe() 方法启动监听，并传入要观察的目标元素和配置项。配置项决定监听哪些类型的变更。
常用配置选项包括：
- childList: 监听子节点的增删
- subtree: 是否递归监听所有后代节点
- attributes: 监听元素属性的变化
- characterData: 监听文本内容的变化
- attributeOldValue: 记录属性旧值
- characterDataOldValue: 记录文本旧值
示例：监听某个容器内的结构变化和属性变化
observer.observe(document.getElementById('container'), {
childList: true,
subtree: true,
attributes: true,
attributeOldValue: true
});实际应用场景
你可以用 MutationObserver 处理一些动态加载内容的场景，比如：
- 第三方脚本插入广告或弹窗后自动处理
- 单页应用中路由变化但 URL 不变时，监控内容区域更新
- 表单字段动态生成后绑定事件
- 监控输入框 placeholder 变化或禁用状态切换
例如：自动为新插入的按钮绑定点击事件
```javascript new MutationObserver(mutations => { mutations.forEach(mutation => { mutation.addedNodes.forEach(node => { if (node.nodeType === 1 && node.matches && node.matches('.dynamic-btn')) { node.addEventListener('click', () => alert('动态按钮被点击')); } }); }); }).observe(document.body, { childList: true, subtree: true }); ```停止监听与清理
一旦不再需要监听，应调用 disconnect() 方法防止内存泄漏。
```javascript observer.disconnect(); ```如果只想暂时暂停，可以先 disconnect，之后重新 observe。也可以使用 takeRecords() 获取当前尚未处理的变动记录。
基本上就这些。MutationObserver 灵活但别滥用，只在真正需要响应 DOM 变化时使用，避免过度监听影响性能。
