data-*属性必须用setAttribute设置，dataset赋值仅修改内存映射而不写入DOM；读取推荐dataset，写入必须用setAttribute，命名须全小写连字符，值均为字符串需手动转换。
data-* 属性必须用 setAttribute 设置，不能只靠 dataset 赋值
直接写 el.dataset.userId = "123" 看似生效，但不会真正写入 DOM 属性节点——刷新页面或调用 el.outerHTML 时，该属性就消失了。dataset 的赋值只是临时修改内存中那个映射对象，不是持久化操作。
真正可靠的写法只有：el.setAttribute("data-user-id", "123")。它会同步更新 HTML attribute 层，且所有读取方式（getAttribute、dataset）后续都能拿到新值。
- 新增属性必须用
setAttribute：首次设置data-new-flag时，el.dataset.newFlag = "yes"完全无效，DOM 上查不到这个属性 - 批量写入推荐：
Object.entries(data).forEach(([k, v]) => el.setAttribute(`data-${k}`, v)) - 删除必须用
el.removeAttribute("data-user-id")；delete el.dataset.userId不起作用
dataset.xxx = value 和 setAttribute("data-xxx", value) 行为不一致
两者不是等价替换。如果先执行 el.dataset.status = "loading"，再执行 el.setAttribute("data-status", "done")，后续读 el.dataset.status 仍返回 "loading" —— 因为 dataset 是初始化时的一次性快照，不是双向绑定。
这意味着混用两种方式极易导致状态错乱，尤其在组件复用或重渲染场景下。
立即学习“前端免费学习笔记（深入）”；
- 读取建议统一用
el.dataset.xxx（语义清晰、自动驼峰） - 写入必须统一走
setAttribute（确保真实写入） - 不要依赖
el.dataset.xxx的返回值判断属性是否已写入成功
data-* 属性名必须全小写+连字符，否则 getAttribute 也读不到
浏览器只识别严格符合规范的命名：data-user-id ✅，data_user_id ❌，data-UserId ❌，data-2024-report ✅（但 JS 中得用 el.dataset["2024Report"]）。
哪怕你用 setAttribute("data_user_id", "123") 写进去了，el.getAttribute("data_user_id") 能读到，但这个属性根本不算合法 data-* 属性，无法被 CSS 选择器 [data_user_id] 匹配，也不进 dataset 映射。
- 命名含大写字母（如
data-Api-Key）→ 浏览器静默忽略，getAttribute("data-Api-Key")返回null - 数字开头（如
data-1st-load）→ 合法，但只能用方括号访问：el.dataset["1stLoad"] - 下划线（如
data-first_name）→getAttribute可读，但dataset.firstName无法映射
存数字、布尔、JSON 时，值永远是字符串，必须手动转换
data-count="42" 和 data-active="false" 在 JS 里读出来全是字符串："42"、"false"。直接用于条件判断或计算会出错。
常见误写：if (el.dataset.active) { ... } —— 只要属性存在，哪怕值是 "false"，这个判断也为真。
- 转数字：
const count = Number(el.getAttribute("data-count"))或+el.getAttribute("data-count") - 转布尔：
el.getAttribute("data-active") === "true"（别用Boolean()） - 存 JSON：
data-config='{"theme":"dark"}'→ 读取后必须JSON.parse(el.getAttribute("data-config"))，不能用el.dataset.config（键名可能被驼峰转换错）
实际写的时候，最稳的组合是：用 setAttribute 写，用 getAttribute 读，遇到需要驼峰或批量操作再切回 dataset —— 但始终记得它不负责写入。
