el.className = 'x' 不触发 MutationObserver，因其操作 DOM property 而非 HTML attribute；仅 setAttribute 等 attribute 变更才触发，data-* 和反射属性同理，且监听需正确配置 attributes、childList 等选项。
为什么 el.className = 'x' 不触发 MutationObserver？
因为 className 是 DOM property，不是 HTML attribute。MutationObserver 只响应 setAttribute('class', 'x') 这类 attribute 层操作。直接赋值 el.className、el.style.color 或 el.id 都不会进回调队列。
-
data-* 属性例外：用 dataset.xxx = 'y' 会底层调用 setAttribute，所以能触发
-
disabled、checked 等反射属性也一样：必须用 el.setAttribute('disabled', '') 才算 attribute 变更
- 检查方式：在 DevTools 的 Elements 面板里看属性是否真出现在 HTML 标签上（比如
<div class="x">），而不是只在 Console 里 <code>console.log(el.className)监听 data-* 属性却没反应？先看这三处配置
只写 { attributes: true } 会静默失败——浏览器不报错，但根本不监听。必须同时启用 childList: true 或 characterData: true 中至少一项。
- 正确最小配置：
{ attributes: true, childList: true }
- 若目标节点是动态插入的后代（比如框架渲染的
<div data-loaded="true">），还得加 <code>subtree: true -
attributeFilter 必须小写全列：['data-status', 'data-user-id']，不能写成 ['dataStatus'] 或漏掉连字符
-
data-user_id 是非法命名，浏览器直接忽略，只能用 data-user-id
自定义元素的 attributeChangedCallback 不执行？大概率是名字没对齐observedAttributes 数组里的字符串必须和 HTML 中写的 attribute 名**逐字符一致**：大小写、连字符、data- 前缀一个都不能少。
-
<my-card data-config="123"></my-card> → observedAttributes 里必须写 ['data-config']，不能只写 ['config']
-
<my-input value="abc"></my-input>（V 大写）→ 数组里写 ['value'] 就不触发
- 它只响应
setAttribute 和 HTML 初始解析，this.value = 'x' 或 this.dataset.config = 'y' 都不会进回调
- 首次挂载时的
oldValue 是 null，不是 undefined，别用 !oldValue 判断
监听失败但控制台没报错？重点查 target 和 observe 调用时机
MutationObserver 不报错 ≠ 配置生效。常见“假成功”场景：
-
targetNode 是 null 或 undefined：比如在 Vue setup() 里直接 document.getElementById('x')，DOM 还没挂载
- 创建了
new MutationObserver()，但忘了调用 observer.observe(target, config)
- 监听
document 或 document.body：旧版 Safari 不稳定，应改用具体容器如 #app
- 目标节点被框架（React/Vue）替换了：v-if 切换或 key 变更后，旧节点被移除，observer 自动失活——此时该监听父容器并开
childList: true
真正容易被忽略的是：MutationObserver 回调在 microtask 队列中执行，比同步代码晚、比 setTimeout 早。你手动查 DOM 发现属性已变，不代表 observer 已触发；它可能还在排队，也可能已经因节点消失而终止。
HISUI 前端框架开发指南（IRIS版）
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
下载
data-* 属性例外：用 dataset.xxx = 'y' 会底层调用 setAttribute，所以能触发 disabled、checked 等反射属性也一样：必须用 el.setAttribute('disabled', '') 才算 attribute 变更 <div class="x">），而不是只在 Console 里 <code>console.log(el.className)监听 data-* 属性却没反应？先看这三处配置
只写 { attributes: true } 会静默失败——浏览器不报错，但根本不监听。必须同时启用 childList: true 或 characterData: true 中至少一项。
- 正确最小配置：
{ attributes: true, childList: true }
- 若目标节点是动态插入的后代（比如框架渲染的
<div data-loaded="true">），还得加 <code>subtree: true -
attributeFilter 必须小写全列：['data-status', 'data-user-id']，不能写成 ['dataStatus'] 或漏掉连字符
-
data-user_id 是非法命名，浏览器直接忽略，只能用 data-user-id
自定义元素的 attributeChangedCallback 不执行？大概率是名字没对齐observedAttributes 数组里的字符串必须和 HTML 中写的 attribute 名**逐字符一致**：大小写、连字符、data- 前缀一个都不能少。
-
<my-card data-config="123"></my-card> → observedAttributes 里必须写 ['data-config']，不能只写 ['config']
-
<my-input value="abc"></my-input>（V 大写）→ 数组里写 ['value'] 就不触发
- 它只响应
setAttribute 和 HTML 初始解析，this.value = 'x' 或 this.dataset.config = 'y' 都不会进回调
- 首次挂载时的
oldValue 是 null，不是 undefined，别用 !oldValue 判断
监听失败但控制台没报错？重点查 target 和 observe 调用时机
MutationObserver 不报错 ≠ 配置生效。常见“假成功”场景：
-
targetNode 是 null 或 undefined：比如在 Vue setup() 里直接 document.getElementById('x')，DOM 还没挂载
- 创建了
new MutationObserver()，但忘了调用 observer.observe(target, config)
- 监听
document 或 document.body：旧版 Safari 不稳定，应改用具体容器如 #app
- 目标节点被框架（React/Vue）替换了：v-if 切换或 key 变更后，旧节点被移除，observer 自动失活——此时该监听父容器并开
childList: true
真正容易被忽略的是：MutationObserver 回调在 microtask 队列中执行，比同步代码晚、比 setTimeout 早。你手动查 DOM 发现属性已变，不代表 observer 已触发；它可能还在排队，也可能已经因节点消失而终止。
HISUI 前端框架开发指南（IRIS版）
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
下载
{ attributes: true, childList: true } <div data-loaded="true">），还得加 <code>subtree: true attributeFilter 必须小写全列：['data-status', 'data-user-id']，不能写成 ['dataStatus'] 或漏掉连字符 data-user_id 是非法命名，浏览器直接忽略，只能用 data-user-id
自定义元素的 attributeChangedCallback 不执行？大概率是名字没对齐observedAttributes 数组里的字符串必须和 HTML 中写的 attribute 名**逐字符一致**：大小写、连字符、data- 前缀一个都不能少。
-
<my-card data-config="123"></my-card> → observedAttributes 里必须写 ['data-config']，不能只写 ['config']
-
<my-input value="abc"></my-input>（V 大写）→ 数组里写 ['value'] 就不触发
- 它只响应
setAttribute 和 HTML 初始解析，this.value = 'x' 或 this.dataset.config = 'y' 都不会进回调
- 首次挂载时的
oldValue 是 null，不是 undefined，别用 !oldValue 判断
监听失败但控制台没报错？重点查 target 和 observe 调用时机
MutationObserver 不报错 ≠ 配置生效。常见“假成功”场景：
-
targetNode 是 null 或 undefined：比如在 Vue setup() 里直接 document.getElementById('x')，DOM 还没挂载
- 创建了
new MutationObserver()，但忘了调用 observer.observe(target, config)
- 监听
document 或 document.body：旧版 Safari 不稳定，应改用具体容器如 #app
- 目标节点被框架（React/Vue）替换了：v-if 切换或 key 变更后，旧节点被移除，observer 自动失活——此时该监听父容器并开
childList: true
<my-card data-config="123"></my-card> → observedAttributes 里必须写 ['data-config']，不能只写 ['config'] <my-input value="abc"></my-input>（V 大写）→ 数组里写 ['value'] 就不触发 setAttribute 和 HTML 初始解析，this.value = 'x' 或 this.dataset.config = 'y' 都不会进回调 oldValue 是 null，不是 undefined，别用 !oldValue 判断-
targetNode是null或undefined：比如在 Vuesetup()里直接document.getElementById('x')，DOM 还没挂载 - 创建了
new MutationObserver()，但忘了调用observer.observe(target, config) - 监听
document或document.body：旧版 Safari 不稳定，应改用具体容器如#app - 目标节点被框架（React/Vue）替换了：v-if 切换或 key 变更后，旧节点被移除，observer 自动失活——此时该监听父容器并开
childList: true
真正容易被忽略的是：MutationObserver 回调在 microtask 队列中执行，比同步代码晚、比 setTimeout 早。你手动查 DOM 发现属性已变，不代表 observer 已触发；它可能还在排队，也可能已经因节点消失而终止。
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
