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 变化或禁用状态切换
例如：自动为新插入的按钮绑定点击事件
“`javascriptnew 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() 方法防止内存泄漏。
“`javascriptobserver.disconnect();“`
如果只想暂时暂停，可以先 disconnect，之后重新 observe。也可以使用 takeRecords() 获取当前尚未处理的变动记录。
基本上就这些。MutationObserver 灵活但别滥用，只在真正需要响应 DOM 变化时使用，避免过度监听影响性能。
以上就是如何利用Mutation Observer监听DOM树的动态变化？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1523988.html
微信扫一扫 
支付宝扫一扫 
