使用MutationObserver监听DOM变化_javascript API

MutationObserver是监听页面DOM变化的高效API，通过new MutationObserver(callback)创建实例并调用observe()方法监听目标节点，支持childList、subtree、attributes等配置项，可精准监控节点增删、属性或文本变化，适用于广告拦截、表单监控、内容加载检测等场景，使用后需调用disconnect()避免内存泄漏。

MutationObserver 是 JavaScript 提供的一个强大 API，用于监听 DOM 树的变化。相比旧的 Mutation Events，它性能更好、更灵活，适合在现代 Web 开发中监控元素的增删、属性修改、文本内容变更等场景。

基本用法

MutationObserver 通过构造函数创建实例，并传入一个回调函数。当监听的 DOM 发生变化时，该回调会被异步触发。

创建观察者后，需要调用 observe() 方法指定目标节点和配置项：

常用配置选项

observe() 的第二个参数是一个配置对象，用来精确控制监听范围：

立即学习“Java免费学习笔记（深入）”；

• childList: 监听目标节点的子节点增删
• subtree: 是否递归监听所有后代节点
• attributes: 监听属性值变化（如 class、style）
• characterData: 监听文本内容变化
• attributeFilter: 指定监听的具体属性名数组，例如 ['class', 'style']
• attributeOldValue: 记录属性旧值
• characterDataOldValue: 记录文本旧值

合理设置这些选项可以避免不必要的回调，提升性能。

听脑AI

听脑AI语音，一款专注于音视频内容的工作学习助手，为用户提供便捷的音视频内容记录、整理与分析功能。

378

查看详情

实际应用场景

MutationObserver 常用于以下情况：

• 第三方脚本动态插入广告或弹窗时，自动移除特定元素
• 监控表单字段是否被 JS 修改
• 检测页面内容加载完成（如 SPA 中某些组件异步渲染）
• 实现自定义的 DOM 变化日志或调试工具

例如，监听某个容器内是否有新元素插入并做处理：

停止监听

使用完后应手动断开连接，防止内存泄漏：

• observer.disconnect(): 停止所有监听
• observer.takeRecords(): 获取尚未处理的变动记录，常用于清理前收尾

通常在组件销毁或页面跳转前调用 disconnect()。

基本上就这些。MutationObserver 虽然功能强大，但也不宜滥用，只在真正需要响应 DOM 变化时才使用。正确配置能有效减少性能损耗。

以上就是使用MutationObserver监听DOM变化_javascript API的详细内容，更多请关注php中文网其它相关文章！