Mutation Observer 提供高效异步监听 DOM 变化，支持属性、子节点、文本等监控。通过 new MutationObserver(callback) 创建实例，调用 observe(target, config) 启动监听，配置项可精确控制监听范围如 childList、attributes、characterData 等。推荐针对具体节点监听，避免性能损耗。常见场景包括动态内容插入、class 变化检测、表单值监听。需合理管理生命周期，在不需要时调用 disconnect() 释放资源，防止内存泄漏。适用于 SPA 组件销毁前清理，确保稳定性和性能。
Mutation Observer 是现代浏览器提供的一种高效监听 DOM 变化的方法。相比已废弃的 DOM Mutation Events，它采用异步回调机制，在性能和灵活性上都有显著提升。通过它，你可以监控元素属性、子节点、文本内容等变化。
基本用法
创建一个 MutationObserver 实例时，传入一个回调函数，该函数会在观察到变化时被调用。然后调用 observe() 方法指定要监控的目标节点和配置项。
const observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log('变化类型:', mutation.type); if (mutation.type === 'childList') { console.log('新增节点:', mutation.addedNodes); console.log('删除节点:', mutation.removedNodes); } });});// 开始监听某个元素observer.observe(document.body, { childList: true, // 监听子节点增删 subtree: true, // 是否包括所有后代节点 attributes: true, // 监听属性变化 attributeFilter: ['class'], // 只监听 class 属性 characterData: true // 监听文本内容变化});
常见监控场景与配置建议
根据实际需求调整 observe 的配置参数，可以精准控制监听范围，避免不必要的回调触发。
监控动态插入的内容（如 Ajax 加载）：启用 childList 和 subtree 检测样式类切换：开启 attributes 并配合 attributeFilter: [‘class’] 监听表单值变化（input 元素文本）：需要同时设置 characterData: true 和目标为文本节点的父级 减少性能开销：尽量避免监听整个 document.body，优先选择具体容器节点
停止监听与资源管理
当不再需要监听时，应及时断开观察器，防止内存泄漏或重复执行。
observer.disconnect()：停止所有监听，清除待处理的变更记录 observer.takeRecords()：获取当前已发生但未处理的变更列表，常用于清理前分析数据 在 SPA 或组件销毁时（如 Vue/React 生命周期结束），务必调用 disconnect
基本上就这些。Mutation Observer 虽强大，但也别滥用。合理使用能帮你捕捉关键 DOM 变动，而不当的监听可能导致性能下降。掌握好观察粒度和生命周期管理，才能发挥它的真正价值。
以上就是利用Mutation Observer监听DOM变化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533460.html
微信扫一扫 
支付宝扫一扫 
