css属性选择器可精准定位无id或class的元素：[data-target-id]匹配含该属性的元素，[data-target-id="123"]要求值完全相等，[data-role~="admin"]匹配空格分隔值中的单词，[data-url^="https://"]匹配开头字符串；queryselector与queryselectorall直接支持这些语法，配合标签名或父容器限定可提升性能。
用 [data-*] 选择器定位元素
不靠 id 或 class，也能精准选中元素——CSS 属性选择器就是干这个的。只要元素带 data- 属性，就能用方括号语法匹配。
常见写法：
-
[data-target-id]：选所有含data-target-id属性的元素（不管值是什么） -
[data-target-id="123"]：只选属性值**完全等于**"123"的元素 -
[data-role~="admin"]：选data-role值包含单词"admin"的（空格分隔，类似class） -
[data-url^="https://"]：选data-url值以"https://"开头的
注意：[data-target-id] 和 [data-target-id=""] 不等价——后者只匹配显式写成 data-target-id="" 的元素，空属性值容易被忽略。
querySelector 与 querySelectorAll 怎么配合 data 属性用
选一个还是选一堆，取决于你调用哪个方法。它们都接受 CSS 选择器字符串，所以 [data-*] 写法直接可用。
典型用法：
- 取第一个匹配项：
document.querySelector('[data-api-key]') - 取全部匹配项：
document.querySelectorAll('[data-track="click"]') - 组合条件：
document.querySelector('button[data-action="submit"][data-pending="false"]')
性能提示：如果页面里 data- 属性很多，且选择器没加标签名（比如只写 [data-id]），浏览器要遍历整个 DOM 树。加个标签前缀如 div[data-id] 或限定父容器（form.querySelectorAll('[data-validate]')）能明显提速。
dataset 和 getAttribute 读值的区别在哪
两者都能拿到 data- 属性值，但行为不同，不能混用。
-
el.dataset.userId→ 对应 HTML 中data-user-id，自动转驼峰，**只认data-开头的属性** -
el.getAttribute('data-user-id')→ 原样返回字符串，大小写敏感，支持任意属性名 -
el.dataset["user-id"]会报错；必须写成el.dataset.userId或el.dataset["userId"] - 如果属性名含数字或双连字符（如
data-id-2024），dataset.id2024才对，getAttribute('data-id-2024')更直白
兼容性提醒：IE11 支持 dataset，但旧版 IE（≤10）不支持，此时只能靠 getAttribute 回退。
动态设置 data 属性时最容易错的三件事
运行时加、改、删 data- 属性，看似简单，实际几个坑藏得深：
- 用
dataset赋值会自动转字符串：el.dataset.count = 42→ DOM 中变成data-count="42"，没法存undefined或null - 想删属性不能
delete el.dataset.xxx，得用el.removeAttribute('data-xxx') - 属性名含下划线（
data_user_id）或大写字母（data-UserId）时，dataset完全无法映射，必须用getAttribute/setAttribute
最稳妥的动态写法是统一走 setAttribute 和 getAttribute，尤其当属性名不规则或需保持原始格式时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
