dom元素可通过data-*属性绑定自定义数据，html5原生支持、语义清晰、兼容性好；javascript通过dataset读写，值恒为字符串需手动转换类型；不推荐直接挂载属性以免丢失序列化和语义。
DOM 元素可以通过 data-* 属性 绑定自定义数据，这是 HTML5 标准支持的原生方式，既语义清晰又兼容良好。
使用 data-* 属性直接写在 HTML 中
在标签上添加以 data- 开头的属性即可，属性名中横线（-）会自动转为驼峰式（camelCase）供 JavaScript 读取：
<div id="item" data-user-id="123" data-is-active="true" data-tags="js,dom"></div>
JavaScript 中通过 dataset 属性访问：
const el = document.getElementById('item');<br>console.log(el.dataset.userId); // "123"<br>console.log(el.dataset.isActive); // "true"<br>console.log(el.dataset.tags); // "js,dom"用 JavaScript 动态设置或修改 data 属性
可通过 dataset 对象赋值，或用 setAttribute 方法：
-
el.dataset.price = "99.9";→ 生成data-price="99.9" -
el.dataset.userInfo = '{"name":"Alice"}';→ 注意：字符串需自行 JSON 解析 -
el.setAttribute('data-loaded', 'yes');→ 等效于el.dataset.loaded = 'yes'
读取时注意类型和格式
dataset 返回的值**总是字符串**，布尔、数字、JSON 等需手动转换：
-
Boolean(el.dataset.isActive)不可靠（非空字符串都为 true），建议用el.dataset.isActive === 'true' -
Number(el.dataset.price)或parseFloat()处理数值 -
JSON.parse(el.dataset.config)解析 JSON 字符串（确保内容合法）
不推荐用自定义属性名（如 el.myData = xxx）
直接给 DOM 元素挂属性虽能运行，但存在明显问题：
- 不会反映在 HTML 源码或开发者工具的属性面板中
- 不参与序列化（
outerHTML不包含它） - 可能与未来标准属性冲突，且缺乏语义性
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
