queryselector('[data-id="user_123"]')可精确匹配data-id值为"user_123"的元素；需注意引号包裹、大小写敏感、属性存在性校验及避免用dataset替代选择器。
用 querySelector 按 data-* 属性值精确匹配元素
直接通过属性选择器定位是最常用也最可靠的方式，无需依赖 id 或 class。CSS 属性选择器语法天然支持 data-*，例如 [data-id="user_123"] 就能精准命中目标元素。
常见错误现象：document.querySelector('div[data-id]') 只检查属性是否存在，不校验值；若页面有多个 data-id，它只返回第一个，容易漏掉预期元素。
- 要匹配具体值，必须写全等号和引号：
document.querySelector('[data-target-id="UNIQUE_VALUE_123"]') - 值含空格、括号、点号等特殊字符时，必须用引号包裹，否则解析失败
- 大小写敏感：HTML 中
data-id="User123"和选择器[data-id="user123"]不匹配 - 若值来自后端动态注入，注意转义单/双引号，避免破坏 HTML 结构
querySelectorAll 批量获取所有带某 data-* 属性的元素
当需要处理一组同类元素（比如所有带 data-type="card" 的容器），querySelectorAll 比循环查 querySelector 更高效且语义清晰。
使用场景：渲染列表、批量绑定事件、统一初始化组件状态。
- 返回的是
NodeList，不是数组，但可用forEach遍历（现代浏览器） -
document.querySelectorAll('[data-role]')获取所有含data-role的元素，不管值是什么 - 组合条件更灵活，例如：
document.querySelectorAll('button[data-action][data-priority="high"]') - 注意性能：选择器越复杂（如嵌套伪类 + 多个属性），查找越慢，避免在高频操作中反复调用
用 getAttribute 读取 data-* 值前，先确认元素存在
很多人在用 querySelector 找到元素后，直接链式调用 .getAttribute()，却忽略查找失败时返回 null，导致 Cannot read property 'getAttribute' of null 报错。
这不是 dataset 的问题，而是 DOM 查询本身的容错盲区。
- 永远对
querySelector结果做存在性判断：const el = document.querySelector('[data-id="abc"]'); if (el) { ... } - 不要省略
if—— 即使你“确定”元素存在，DOM 加载时机、异步插入、测试环境差异都可能导致它暂时为null -
getAttribute返回null表示属性确实不存在；返回空字符串表示属性存在但值为空，二者语义不同 - 如果属性名含数字开头（如
data-2nd-item），dataset无法访问，但getAttribute('data-2nd-item')照常工作
别依赖 dataset 做查找，它只负责读取，不参与选择
dataset 是 HTMLElement 的只读属性，用于读取已获取元素的 data-* 值，它本身不能用来查找或筛选元素。试图用 dataset 替代 CSS 选择器，是混淆了“定位”和“取值”两个阶段。
容易踩的坑：有人写 Array.from(document.querySelectorAll('*')).filter(el => el.dataset.id === '123')，这在小页面还能跑，但一旦 DOM 节点超千级，性能断崖式下跌——因为先取了全部元素再过滤，而不是让浏览器原生引擎直接定位。
-
dataset的命名转换规则（连字符→驼峰）只影响读取，不影响选择器语法；选择器里仍必须写原始名，如[data-user-id]，不能写[data-userId] - IE11 不支持
dataset，但支持getAttribute和属性选择器，所以兼容性要求高时，查找+读取都应统一用getAttribute - 真正需要“根据 data 值动态选中”的逻辑，应封装成函数，内部用
querySelector+getAttribute组合，而非暴露dataset到查找层
最易被忽略的一点：data 属性值始终是字符串，无论你存的是 "true"、"42" 还是 "null"。用 getAttribute 读出来就是原样字符串，不会自动转布尔或数字——类型转换得你自己来，别指望浏览器替你猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
