HTML自定义属性（Attributes）与JS对象属性（Properties）同步机制-html教程-PHP中文网

因为html attribute和dom property是两套独立机制：非布尔属性（如data-*、id、value）基本实时同步；布尔属性（如checked、disabled）仅在未被js修改时，attribute变更才影响property。

html自定义属性（attributes）与js对象属性（properties）同步机制

为什么 `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></option>）
readonly（<input> / <textarea></textarea>）
required（同上）

非布尔属性包括：id、class、src、href、value、title、所有 data-* 属性等。

表答

表答是一款AI智能体工具，AI数据采集与数据分析智能体。

下载

想安全读写自定义配置，为什么必须用 `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}))。