mutationobserver 是监听 dom 属性变化最标准高效的方式，需配置 attributes: true，可选 attributeoldvalue 和 attributefilter 精准监听，通过 observe() 绑定目标节点并遍历 mutationslist 处理变动。

用 MutationObserver 监听 DOM 节点的属性变化是最标准、高效且现代的方式。它不是靠轮询，而是浏览器在 DOM 属性真正变动后异步批量通知你，性能好、兼容性强（所有主流浏览器都支持）。

创建并配置观察器

你需要指定一个回调函数，并传入配置对象，告诉浏览器“只关心属性改了没”：

• 用 new MutationObserver(callback) 创建实例
• 回调函数接收两个参数：mutationsList（变动记录数组）和 observer（当前观察器）
• 配置项中必须设 attributes: true，否则不会触发属性监听
• 如果想获取旧值（比如 class 从 "a" 变成 "b"），要加 attributeOldValue: true

精准监听特定属性（可选但推荐）

避免无关属性变动干扰逻辑，用 attributeFilter 锁定目标：

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

• 例如只监听 class 和 data-status：attributeFilter: ['class', 'data-status']
• 不设置该选项时，默认监听所有属性（包括 id、style、src 等）
• 注意：属性名必须写字符串，大小写敏感

开始监听目标节点

调用 observe() 方法，传入 DOM 元素和配置对象：

• targetNode 必须是单个元素节点（不能是 NodeList 或 jQuery 对象），可用 document.getElementById() 或 .querySelector() 获取
• 如果还要监听它的子元素里的属性变化，加上 subtree: true
• 只监听目标自身属性变化，subtree 可省略或设为 false

在回调里处理具体变动

每次触发回调，遍历 mutationsList，判断类型并提取关键信息：

• mutation.type === 'attributes' 表示是属性变化
• mutation.attributeName 是被修改的属性名（如 "class"）
• mutation.oldValue 存在的前提是配置了 attributeOldValue: true
• mutation.target 是发生变动的那个 DOM 元素（可用于进一步操作）

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南