getAttribute('data-xxx')最稳，因dataset.xxx在属性名含数字、大写字母、下划线或需保留原始字符串时会静默返回undefined；getAttribute()原样读取HTML值，无转换、不自动类型转换、无命名限制。
直接用 getAttribute('data-xxx') 最稳，别一上来就用 dataset.xxx——后者在属性名含数字、大写字母、下划线或你想保留原始字符串时，会静默返回 undefined，还不报错。
为什么 getAttribute() 比 dataset 更可靠
dataset 依赖浏览器的驼峰转换规则：只认全小写+连字符格式（如 data-user-id → dataset.userId）。一旦出现这些情况，它就失效：
-
data-1st-load→dataset.1stLoad是非法变量名，结果为undefined -
data-apiKey→dataset.apikey（全小写），大小写丢失 -
data_user_id→dataset._userId不匹配，返回undefined -
data-initial-state='{"count":10}'→dataset.initialState是字符串"{"count":10}"，但你无法判断它是 JSON 还是普通文本
getAttribute() 没这些限制：它原样读取 HTML 中写的值，包括空格、引号、大小写和特殊符号，且返回值永远是字符串，不自动转布尔或数字。
怎么批量提取多个元素的 data-id 值
用 querySelectorAll() 配合 Array.from() 映射，避免手写循环：
立即学习“前端免费学习笔记（深入）”；
const idArray = Array.from(
document.querySelectorAll('[data-id]'),
el => el.getAttribute('data-id')
);
注意几点：
- 用
getAttribute('data-id')而不是el.dataset.id，防止某元素实际写的是data-ID或data_id导致漏取 - 如果某些元素可能没这个属性，加一层过滤：
.filter(id => id != null) - 不要写成
Array.from(el.dataset.id)——那是在把字符串拆成字符数组
如何用 CSS 选择器定位没有 id 或 class 的 data 元素
靠属性选择器就能精准命中：
-
document.querySelector('[data-target-id]')：选第一个带该属性的元素（不管值） -
document.querySelectorAll('[data-status="active"]')：选所有data-status="active"的元素 -
document.querySelector('[data-api-endpoint^="https"]')：用^=匹配以https开头的值
注意：如果属性值含特殊字符（比如 ]、"），需用反斜杠转义，或改用 getAttribute() + 手动判断更稳妥。
真正容易被忽略的是：服务端渲染或框架注入的 data- 属性，经常带大小写或数字开头；此时 dataset 已经不可信，getAttribute() 是唯一能拿到原始值的入口。别等线上出 bug 才回头查命名规则。
