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 标签上（比如
  ），而不是只在 Console 里 console.log(el.className)

  监听 data-* 属性却没反应？先看这三处配置 只写 { attributes: true } 会静默失败——浏览器不报错，但根本不监听。必须同时启用 childList: true 或 characterData: true 中至少一项。

  • 正确最小配置：{ attributes: true, childList: true }
  • 若目标节点是动态插入的后代（比如框架渲染的
    ），还得加 subtree: true
  • attributeFilter 必须小写全列：['data-status', 'data-user-id']，不能写成 ['dataStatus'] 或漏掉连字符
  • data-user_id 是非法命名，浏览器直接忽略，只能用 data-user-id

  自定义元素的 attributeChangedCallback 不执行？大概率是名字没对齐observedAttributes 数组里的字符串必须和 HTML 中写的 attribute 名**逐字符一致**：大小写、连字符、data- 前缀一个都不能少。

  • → observedAttributes 里必须写 ['data-config']，不能只写 ['config']
  • （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 数据访问方法。

  下载