JavaScript获取data属性值的技巧

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JavaScript获取Data属性值方法详解》，聊聊，希望可以帮助到正在努力赚钱的你。

本文详细介绍了如何在不依赖ID和Class选择器的情况下，利用JavaScript高效获取HTML元素的自定义数据属性（`data-*`）值。通过讲解`HTMLElement.dataset` API和CSS属性选择器（如`[attribute]`和`[attribute="value"]`），并结合`querySelector`与`querySelectorAll`，提供了从单个或多个元素中提取`data-target-id`等属性值的实用方法和代码示例，旨在提升前端开发中数据处理的灵活性。

引言：理解HTML data-* 属性

HTML5引入了自定义数据属性（data-*），允许开发者在标准HTML元素上存储额外的信息，而无需使用非标准的属性或DOM操作技巧。这些属性以data-为前缀，后跟自定义的名称，例如

在某些场景下，我们可能需要获取这些data-*属性的值，但目标元素可能没有唯一的id或特定的class。此时，我们需要借助其他DOM选择器和API来精准定位并提取所需数据。

核心API：HTMLElement.dataset

在JavaScript中，访问data-*属性最推荐和最现代的方式是使用HTMLElement.dataset属性。dataset返回一个DOMStringMap对象，其中包含了元素所有data-*属性的键值对。

工作原理： 当一个data-*属性被定义时，例如data-target-id，在dataset对象中它会被转换为驼峰命名法（camelCase）的键，即targetId。

示例： 如果HTML元素是

无需ID或Class的元素选择

为了获取没有id或class的元素的data-*属性，我们可以利用CSS属性选择器来定位元素。

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结构：

<div class="" data-target-id="VALUE_A" data-id="legacy"></div>
<div class="some-class" data-target-id="VALUE_B"></div>
<div data-id="another" data-target-id="VALUE_C"></div>
<div data-target-id="VALUE_D" data-id="legacy"></div>

示例一：获取第一个匹配元素的 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

注意事项

1. 驼峰命名法转换： data-*属性名在dataset中会自动转换为驼峰命名法。例如，data-some-attribute会变成dataset.someAttribute。
2. 浏览器兼容性： HTMLElement.dataset API在现代浏览器中广泛支持。对于非常旧的浏览器（如IE9及以下），可能需要使用getAttribute()方法，但这种情况现在已非常罕见。
3. 性能考量： querySelectorAll返回的是一个静态的NodeList。如果DOM结构在获取后发生变化，NodeList不会自动更新。如果需要动态更新，可能需要重新查询。对于大量元素的遍历，虽然性能通常不是瓶颈，但在极高性能要求的场景下可以考虑其他优化方案。
4. 错误处理： 在访问dataset属性之前，最好先检查元素是否存在（如if (element)），以避免在元素未找到时出现TypeError。

总结

通过灵活运用CSS属性选择器（[attribute]和[attribute="value"]）结合document.querySelector()或document.querySelectorAll()，以及HTMLElement.dataset API，我们可以在不依赖id或class的情况下，高效且专业地从HTML元素中提取自定义data-*属性的值。这种方法增强了前端脚本处理页面数据的能力，使得代码更加健壮和灵活。掌握这些技巧对于构建动态和数据驱动的Web应用至关重要。

以上就是《JavaScript获取data属性值的技巧》的详细内容，更多关于的资料请关注golang学习网公众号！