javascript 中可通过 document.queryselector() 或 queryselectorall() 配合属性选择器精准查找带 data-* 属性的 dom 元素，支持精确匹配、存在性检查、连字符命名保持、模糊匹配及上下文限定。
在 JavaScript 中，可以通过 document.querySelector() 或 document.querySelectorAll() 配合属性选择器，根据自定义 data-* 属性查找 DOM 节点。
使用属性选择器精确匹配 data 属性
HTML 中的自定义 data 属性（如 data-id="123"、data-category="news"）可直接作为 CSS 选择器使用：
-
document.querySelector('[data-id="123"]')—— 查找第一个data-id值为"123"的元素 -
document.querySelectorAll('[data-active="true"]')—— 查找所有data-active值为"true"的元素 -
document.querySelector('[data-user-id]')—— 只检查属性是否存在（不校验值）
处理带连字符的 data 属性名
HTML 中写成 data-user-name，JS 中通过 dataset 访问时会自动转为驼峰式 userName，但用 CSS 选择器时仍需保持原始写法：
- ✅ 正确选择：
document.querySelector('[data-user-name="alice"]') - ❌ 错误写法：
[dataUserName="alice"]或[data-userName="alice"]（选择器不识别驼峰转换）
模糊匹配或部分匹配值
借助 CSS 属性选择器的修饰符可实现灵活查找：
-
[data-tag~="urgent"]—— 匹配空格分隔列表中包含urgent的（如data-tag="high urgent important"） -
[data-path^="/admin"]—— 匹配值以/admin开头的（如/admin/users） -
[data-id$="001"]—— 匹配值以001结尾的 -
[data-class*="btn"]—— 匹配值中包含btn子串的（如primary-btn）
结合 class 或标签进一步限定范围
避免全局查找冲突，推荐加上上下文限制：
document.querySelector('button[data-action="submit"]')document.querySelector('#sidebar [data-loaded="false"]')-
document.querySelectorAll('li[data-index]:not([data-hidden])')（排除隐藏项）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
