MutationObserver是监听DOM变化的高效工具，通过创建实例并配置选项如childList、subtree、attributes等，可监控节点增删、属性及文本变化，适用于自动移除广告、SPA事件重绑定等场景，使用observe()开始监听，disconnect()停止以避免内存泄漏，需合理配置以平衡功能与性能。
MutationObserver 是 JavaScript 提供的一个强大接口，用于监听 DOM 树的变化。相比旧的 Mutation Events，它性能更好、更灵活，适合在现代前端开发中监控元素的增删、属性修改、文本内容变动等场景。
基本用法
要使用 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); } if (mutation.type === 'attributes') { console.log('属性名:', mutation.attributeName); } });});// 开始监听某个元素observer.observe(document.body, { childList: true, // 监听子节点增删 subtree: true, // 监听所有后代节点 attributes: true, // 监听属性变化 attributeFilter: ['class', 'style'] // 只监听指定属性});
常见监听选项说明
MutationObserver 支持多种配置项，精准控制监听范围：
立即学习“Java免费学习笔记（深入）”；
childList：监听目标元素的直接子节点增删 subtree：是否递归监听所有后代节点，设为 true 可深度监控 attributes：监听元素属性值的变化 characterData：监听文本内容（如文本节点）的变化 attributeOldValue：记录属性变化前的值 characterDataOldValue：记录文本变化前的内容 attributeFilter：只监听指定的属性名数组，减少冗余触发
实际应用场景
MutationObserver 在以下场景中非常实用：
第三方脚本动态插入广告或弹窗时，自动移除特定元素 SPA 应用中监听页面结构变化，重新初始化某些插件或绑定事件 监控表单字段的动态添加，确保验证逻辑生效 调试工具中追踪 DOM 操作来源
例如，自动关闭某些反复出现的弹窗：
const observer = new MutationObserver(() => { const modal = document.querySelector('.ad-popup'); if (modal) modal.remove();});observer.observe(document.body, { childList: true, subtree: true });
停止与重连观察器
一旦不再需要监听，应调用方法释放资源：
observer.disconnect()：停止所有监听，已触发的变化不会被处理 observer.takeRecords()：获取当前尚未处理的变化记录，常用于清理前分析数据 可再次调用 observe() 重新开始监听
建议在组件销毁或页面跳转时主动断开，避免内存泄漏。
基本上就这些。MutationObserver 虽然功能强大，但不要过度使用。监听范围越广，性能开销越大。合理设置配置项，只关注必要的变化，才能发挥最大作用。
以上就是使用MutationObserver监听DOM变化_javascript技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533745.html
微信扫一扫 
支付宝扫一扫 
