data-user-id是唯一合规写法，因浏览器仅解析data-后接小写字母、数字及连字符（且至少一个连字符）的属性，如data-user-id；而data_user_id、data-userid、data-userid等均被静默忽略，dom中不存在，js和css均无法访问。
不能用非标准属性存用户ID，必须用 data-user-id —— 浏览器只保留以 data- 开头、命名合规的属性，其他写法（如 userid、data_user_id、data-UserId）在 DOM 中根本不存在，JS 读不到，CSS 也选不到。
为什么 data-user-id 是唯一靠谱写法
浏览器解析 HTML 时，对 data- 属性有硬性过滤规则：前缀后必须紧跟小写字母、数字或连字符，且不能以数字开头（data-2024-id 合法，但 data-123 不合法）。任何偏差都会被静默忽略。
-
data-user-id→ ✅ 解析成功，JS 可通过el.dataset.userId访问 -
data_user_id、data-userId、data-UserID→ ❌ 全部被丢弃，DevTools 的 Elements 面板里都看不到该属性 -
data-userId看似能写进 HTML，但实际没注册进 DOM，el.getAttribute("data-userId")返回null
dataset.userId 和 getAttribute("data-user-id") 怎么选
读取时优先用 dataset.userId，它自动处理连字符转驼峰，语义清晰；但要注意它返回的永远是字符串，且不支持数字开头的键名（如 data-2024-id 必须用 el.dataset["2024Id"]）。
- 需要类型转换？用
getAttribute更直接：Number(el.getAttribute("data-user-id")) - 要判断布尔值？别信
if (el.dataset.isActive)——data-is-active="false"也会进入 true 分支，正确写法是el.dataset.isActive === "true" - 存的是 JSON 字符串？推荐
JSON.parse(el.getAttribute("data-config") || "{}")，避免dataset.config因驼峰转换错位键名
修改 data-user-id 值的唯一正确方式
el.dataset.userId = "999" 看似生效，其实只是改了内存副本，DOM 节点没变，getAttribute("data-user-id") 仍返回旧值，CSS 选择器（如 [data-user-id="999"]）也匹配不到。
- 真要更新 DOM 属性，必须用
el.setAttribute("data-user-id", "999") - 删属性不能
delete el.dataset.userId，得用el.removeAttribute("data-user-id") - 混用会出问题：先
el.dataset.userId = "123"，再el.setAttribute("data-user-id", "456")，后续el.dataset.userId还是"123"（缓存未刷新）
真正容易被忽略的点是：表格行、列表项这类动态渲染结构里，data- 属性一旦写错命名，调试时 DevTools 里根本看不到它——不是 JS 读错了，是它压根没进 DOM。别猜，打开 Elements 面板直接搜 data-，没出现就是写废了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
