css属性选择器可直接匹配data-*元素，无需class或id；浏览器原生支持（ie8+），需严格按html属性名书写，不认驼峰或dataset规则，值为字符串且特殊字符需加引号。
用 CSS 属性选择器直接选 data-* 元素
不需要 class 或 id，只要 HTML 里写了 data- 属性，就能用 CSS 方括号语法精准定位。浏览器原生支持，无兼容性问题（IE8+ 都行）。
常见错误现象：[data-target-id] 能匹配所有带该属性的元素，但写成 [dataTargetId] 或 [dataset.targetId] 就完全失效——CSS 里不认驼峰，也不认 JavaScript 的 dataset 命名规则。
-
[data-role="menu"]：匹配data-role值**完全等于** "menu" 的元素 -
[data-id^="item-"]：匹配data-id值以 "item-" 开头的元素（如item-123） -
[data-state$="ing"]：匹配值以 "ing" 结尾的（如loading,submitting） -
[data-flag*="beta"]：匹配值中**包含** "beta" 的（不区分位置）
注意：属性值必须是字符串字面量，不能是变量；如果值含空格或特殊字符，要用引号包裹，例如 [data-name="user name"]。
用 JavaScript 的 querySelector 选带 data 属性的元素
document.querySelector() 和 document.querySelectorAll() 支持和 CSS 完全一致的属性选择器语法，是运行时动态找元素最常用的方式。
使用场景：服务端渲染后，需要根据后端注入的 data- 值初始化 JS 行为，比如按 data-api-endpoint 加载不同接口。
- 只取第一个：
document.querySelector('[data-track="click"]') - 取全部：
document.querySelectorAll('[data-type="card"][data-status="active"]')（支持多条件组合） - 值含数字或大小写？没问题：
document.querySelector('[data-1st-load="true"]')、document.querySelector('[data-UID="abc123"]')
性能提示：属性选择器比 class 选择器略慢，但差异微乎其微；避免写成 [data-id] 匹配全页所有带 data-id 的元素，再用 .filter() 二次筛选——应把条件直接写进选择器里。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
用 XPath 提取同时满足多个 data 条件的元素内容
当你要在自动化脚本、爬虫或 DevTools 控制台里做复合筛选（比如 “id 含 line 且 data-visible="1"”），XPath 比 CSS 更灵活。
常见错误现象：写成 //div[@data-visible=1] 报错——XPath 中字符串值必须加引号，数字不行；@data-visible 是对的，但 @dataset.visible 完全无效。
- 基础写法：
//div[@data-visible="1"] - 多条件组合：
//div[contains(@id, "line") and @data-visible="1"] - 提取文本：
string(//div[@data-role="header"]/span)
注意：contains() 只支持字符串匹配，不能用于数值比较；若需判断 data-count > 5，XPath 1.0 不支持，得先取值再 JS 处理。
别踩 dataset 的坑：定位 ≠ 读值
很多人混淆“用 data 属性定位元素”和“用 dataset 读取值”。定位靠的是 HTML 属性本身，跟 JavaScript 的 dataset 对象毫无关系——dataset 只影响读值方式，不影响选择器匹配逻辑。
容易被忽略的地方：
- CSS 和 XPath 选元素时，永远看 HTML 里写的原始属性名，比如
data-user-id，不是userId -
dataset的驼峰转换是单向的：你写el.dataset.userId能读到data-user-id，但反过来，el.dataset["user-id"]会是undefined - 属性名含数字（如
data-2024-active）或大写（如data-API-Key），dataset无法自动映射，但 CSS 选择器照常工作：[data-2024-active="true"]✅
真正在意稳定性和可控性，就别让定位逻辑依赖 dataset 的行为——它只是读值工具，不是定位基础设施。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
