本文详细介绍了如何在不依赖id和class选择器的情况下，利用javascript高效获取html元素的自定义数据属性（`data-*`）值。通过讲解`htmlelement.dataset` api和css属性选择器（如`[attribute]`和`[attribute="value"]`），并结合`queryselector`与`queryselectorall`，提供了从单个或多个元素中提取`data-target-id`等属性值的实用方法和代码示例，旨在提升前端开发中数据处理的灵活性。
引言：理解HTML data-* 属性
HTML5引入了自定义数据属性（data-*），允许开发者在标准HTML元素上存储额外的信息，而无需使用非标准的属性或DOM操作技巧。这些属性以data-为前缀，后跟自定义的名称，例如
。它们提供了一种在不影响页面语义或视觉效果的前提下，将自定义数据附加到HTML元素上的简洁方式，常用于存储小块的私有数据，供JavaScript脚本访问。在某些场景下，我们可能需要获取这些data-*属性的值，但目标元素可能没有唯一的id或特定的class。此时，我们需要借助其他DOM选择器和API来精准定位并提取所需数据。
核心API：HTMLElement.dataset
在JavaScript中，访问data-*属性最推荐和最现代的方式是使用HTMLElement.dataset属性。dataset返回一个DOMStringMap对象，其中包含了元素所有data-*属性的键值对。
工作原理： 当一个data-*属性被定义时，例如data-target-id，在dataset对象中它会被转换为驼峰命名法（camelCase）的键，即targetId。
示例： 如果HTML元素是
，那么你可以通过element.dataset.targetId来访问其值。无需ID或Class的元素选择
为了获取没有id或class的元素的data-*属性，我们可以利用CSS属性选择器来定位元素。
立即学习“Java免费学习笔记（深入）”；
1. 属性选择器 [attribute]
这种选择器用于选取包含指定属性的元素，无论属性值是什么。
语法： [attribute]
应用场景： 当你只想选择所有具有data-target-id属性的元素时。
2. 属性值选择器 [attribute="value"]
这种选择器用于选取指定属性具有特定值的元素。
语法： [attribute="value"]
应用场景： 当你需要选择data-id属性值为legacy的元素时。
3. querySelector 与 querySelectorAll 的应用
结合属性选择器，我们可以使用document.querySelector()和document.querySelectorAll()来定位元素。
- document.querySelector(selector): 返回文档中与指定选择器匹配的第一个元素。如果没有匹配项，则返回null。
- document.querySelectorAll(selector): 返回文档中与指定选择器匹配的所有元素的NodeList（一个类数组对象）。如果没有匹配项，则返回空的NodeList。
实战示例
假设我们有以下HTML结构：
示例一：获取第一个匹配元素的 data-target-id
如果我们想获取文档中第一个具有data-target-id属性的元素，并提取其data-target-id值：
// 使用属性选择器 '[data-target-id]' 选取第一个具有该属性的元素
const targetIdElement = document.querySelector('[data-target-id]');
// 检查元素是否存在，避免错误
if (targetIdElement) {
// 通过 .dataset.targetId 访问其值
const value = targetIdElement.dataset.targetId;
console.log(value); // 输出: VALUE_A
} else {
console.log('未找到具有 data-target-id 属性的元素。');
}示例二：遍历特定 data-id 元素的 data-target-id
如果我们想获取所有data-id属性值为legacy的div元素，并打印它们各自的data-target-id值：
// 使用组合选择器 'div[data-id="legacy"]' 选取所有 data-id="legacy" 的 div 元素
const legacyDivs = document.querySelectorAll('div[data-id="legacy"]');
// 遍历 NodeList 中的每个元素
legacyDivs.forEach(div => {
// 对于每个匹配的 div，访问其 data-target-id 属性
console.log(div.dataset.targetId);
});
// 预期输出:
// VALUE_A
// VALUE_D注意事项
- 驼峰命名法转换： data-*属性名在dataset中会自动转换为驼峰命名法。例如，data-some-attribute会变成dataset.someAttribute。
- 浏览器兼容性： HTMLElement.dataset API在现代浏览器中广泛支持。对于非常旧的浏览器（如IE9及以下），可能需要使用getAttribute()方法，但这种情况现在已非常罕见。
- 性能考量： querySelectorAll返回的是一个静态的NodeList。如果DOM结构在获取后发生变化，NodeList不会自动更新。如果需要动态更新，可能需要重新查询。对于大量元素的遍历，虽然性能通常不是瓶颈，但在极高性能要求的场景下可以考虑其他优化方案。
- 错误处理： 在访问dataset属性之前，最好先检查元素是否存在（如if (element)），以避免在元素未找到时出现TypeError。
总结
通过灵活运用CSS属性选择器（[attribute]和[attribute="value"]）结合document.querySelector()或document.querySelectorAll()，以及HTMLElement.dataset API，我们可以在不依赖id或class的情况下，高效且专业地从HTML元素中提取自定义data-*属性的值。这种方法增强了前端脚本处理页面数据的能力，使得代码更加健壮和灵活。掌握这些技巧对于构建动态和数据驱动的Web应用至关重要。
