因为HTML attribute和DOM property是两套独立机制：非布尔属性（如data-*、id、value）基本实时同步；布尔属性（如checked、disabled）仅在未被JS修改时，attribute变更才影响property。
为什么 setAttribute('data-id', '123') 后 elem.dataset.id 立刻能读到，但 setAttribute('checked', true) 却不生效？
因为 HTML attribute 和 DOM property 是两套独立机制，同步规则完全不同：非布尔属性（如 id、data-*）基本实时同步；布尔属性（如 checked、disabled、selected）只在未被 JS 修改过时，attribute 变更才影响 property。
典型陷阱：
-
input.setAttribute('value', 'abc')不会更新用户看到的输入框内容，也不会改变input.value的值 -
checkbox.setAttribute('checked', '')在 checkbox 已被 JS 设为checked = false后，再执行这句完全无效 -
elem.dataset.foo = 'bar'会自动触发setAttribute('data-foo', 'bar')，但反过来不成立（setAttribute('data-foo', 'bar')会同步到dataset.foo）
哪些属性属于“非布尔型”，哪些是“布尔型”？怎么快速判断？
看对应 JS property 的类型：typeof elem.value === 'string' → 非布尔；typeof elem.checked === 'boolean' → 布尔。浏览器对布尔属性的解析很特殊：HTML 中写 checked、checked=""、checked="anything" 都等价于 true，而缺失该 attribute 才是 false。
常见布尔属性（仅列举高频）：
立即学习“前端免费学习笔记（深入）”；
-
checked（<input type="checkbox">/<input type="radio">） -
disabled（所有表单控件） -
selected（<option>） -
readonly（<input>/<textarea>） -
required（同上）
非布尔属性包括：id、class、src、href、value、title、所有 data-* 属性等。
想安全读写自定义配置，为什么必须用 data-* 而不是随便加个 my-id？
浏览器只把 data-* 属性映射到 dataset 对象，且保证双向同步 —— 这是 W3C 明确定义的唯一“受支持的自定义属性通道”。其他任意命名的属性（如 my-id、flag）虽然能用 getAttribute() 读到，但不会出现在 dataset 里，也不能通过 dataset.myId 访问。
实操建议：
- 写入：
elem.dataset.userId = 'u789'→ 自动变成data-user-id="u789" - 读取：
elem.dataset.userId比getAttribute('data-user-id')更简洁，且自动处理 kebab-case 转 camelCase - 避免用
dataset存对象或数组：它只接受字符串，JSON 序列化需手动处理
监听属性变化时，MutationObserver 和事件监听器各管什么？
MutationObserver 只响应 attribute 变更（比如别人调了 setAttribute()），而 input、change、click 这类事件只响应用户交互或显式 dispatchEvent()，两者完全不重叠。
所以：
- 监听用户输入 → 用
input事件，别指望MutationObserver捕获value变化 - 监听别人是否改了
data-status→ 用MutationObserver观察'attributes'，过滤attributeName: 'data-status' - 想同时响应 JS 修改和用户操作？得组合监听 + 主动检查（例如在
input事件后也读一次elem.value），没有银弹
真正容易被忽略的是：property 修改（如 elem.checked = true）既不触发 MutationObserver，也不触发 change 事件 —— 它只是静默改状态。需要同步副作用时，必须手动 dispatchEvent(new Event('change', {bubbles: true}))。
