dataset不是万能读取器，因其只映射命名合规（全小写、仅含字母数字连字符、不以数字开头）的data-属性，不合规如data-userid或data-1st-load会导致读取undefined；getattribute()才真正可靠。
直接用 getAttribute() 和 setAttribute() 是最稳妥的兼容写法，dataset 在 IE11+ 可用但行为受限，旧环境或不规范命名下会静默失败。
为什么 dataset 不是万能读取器
dataset 是个只读代理，它只映射那些“命名完全合规”的 data- 属性：全小写、仅含字母/数字/连字符、不能以数字开头。一旦 HTML 里写了 data-userId、data_user_id 或 data-2024-year，dataset.userId 或 dataset.2024Year 就会返回 undefined——不是 JS 报错，而是浏览器压根没把它当 data- 属性解析。
常见错误现象：
-
data-productId="1001"写在模板里，JS 却始终读不到el.dataset.productId - 服务端渲染输出
data-order_id="20240921"，前端用dataset.orderId拿到undefined -
data-1st-load="true"在 Chrome 里能用dataset["1stLoad"]访问，但在 Safari 旧版中仍不可靠
getAttribute() 才是底层事实标准
getAttribute() 直接读取 HTML 字符串，不转换、不过滤、不猜测。只要属性名写对了（哪怕不完全合规），它就能返回原始值。它是跨浏览器兼容的底线操作。
使用建议：
- 读取任意
data-值，优先写el.getAttribute('data-user-id')，而不是el.dataset.userId - 判断属性是否存在且非空：
const val = el.getAttribute('data-status'); if (val !== null && val !== '') { ... } - 存 JSON 字符串时必须用它：
JSON.parse(el.getAttribute('data-config'))，避免dataset.config因驼峰转换错位键名 - 验证是否生效？双检：
el.hasAttribute('data-order-id') && el.getAttribute('data-order-id')
setAttribute() 是唯一真正写入 DOM 的方式
el.dataset.xxx = 'value' 看似成功，其实只是改了内存里的映射副本，DOM 节点上没变，getAttribute('data-xxx') 还是原来的值，CSS 选择器也匹配不到新状态。
正确写法只有这一种：
- 设置：
el.setAttribute('data-status', 'loading') - 更新已有值：
el.setAttribute('data-count', String(newCount))（注意类型：值必须是字符串） - 删除：
el.removeAttribute('data-status')；delete el.dataset.status在 IE11+ 虽可用，但不保证 DOM 同步 - 批量写入：
Object.entries(data).forEach(([k, v]) => el.setAttribute(`data-${k}`, String(v)))
最易被忽略的一点：data-* 的值永远是字符串，无论你写的是 "42"、"false" 还是 "{...}"。类型转换必须手动做，且不能依赖 Boolean() 或隐式转换——"false" 是真值，"0" 也是真值。安全判断永远是 el.getAttribute('data-active') === "true"，而不是 if (el.getAttribute('data-active'))。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
