当前位置：首页 > 文章列表 > 文章 > 前端 > JS获取自定义属性的正确方法

JS获取自定义属性的正确方法

2025-12-17 14:00:43 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

大家好，我们又见面了啊~本文《JavaScript获取自定义数据属性方法》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

JavaScript教程：无需ID或Class获取HTML自定义数据属性值

本文详细介绍了如何在不依赖HTML元素的id或class属性的情况下，使用JavaScript获取自定义数据属性（data-*属性）的值。核心方法是利用HTMLElement.dataset API结合CSS属性选择器（如[data-attribute]或[data-attribute="value"]）来精确选取目标元素，并提供了单元素和多元素场景下的代码示例及使用注意事项。

在现代Web开发中，我们经常需要在HTML元素上存储额外的数据，这些数据不直接用于样式或标准行为，而是供JavaScript逻辑使用。HTML5引入的自定义数据属性（以data-为前缀）正是为此目的而设计。本文将指导您如何在不依赖传统的id或class选择器的情况下，高效地通过JavaScript获取这些自定义数据属性的值。

1. 理解自定义数据属性（data-*）

自定义数据属性允许您在任何HTML元素上设置自定义属性，例如：

<div class="" data-target-id="VALUE_A" data-id="legacy-item"></div>
<span data-category="tools" data-item-id="123"></span>

这些属性名必须以data-开头，后面跟着一个或多个小写字母、数字、连字符、点、冒号或下划线组成的字符串。在JavaScript中访问时，连字符会转换为驼峰命名法。

2. 使用 HTMLElement.dataset API 获取属性值

JavaScript通过HTMLElement.dataset属性提供了一个便捷的方式来访问和操作元素的data-*属性。dataset返回一个DOMStringMap对象，其中包含了元素上所有data-*属性的键值对。

关键点：

data-attribute-name 会被转换为 dataset.attributeName（驼峰命名）。
例如，data-target-id 对应 dataset.targetId。

3. 基于属性选择器选取元素

当元素没有id或class时，我们可以利用CSS属性选择器来定位它们。

3.1 选取带有特定数据属性的第一个元素

如果您想选取DOM中第一个拥有特定data-*属性的元素，可以使用document.querySelector()结合属性选择器[attribute]。

示例： 获取第一个具有 data-target-id 属性的 div 元素的 data-target-id 值。

<body>
  <div data-id="other" data-name="ignore"></div>
  <div data-target-id="FIRST_VALUE" data-id="legacy"></div>
  <div data-target-id="SECOND_VALUE" data-id="new"></div>
</body>
<script>
  // 选取DOM中第一个拥有 'data-target-id' 属性的元素
  const targetElement = document.querySelector('[data-target-id]');

  if (targetElement) {
    // 访问其 data-target-id 属性的值
    // 注意：data-target-id 转换为 dataset.targetId
    console.log(targetElement.dataset.targetId); // 输出: FIRST_VALUE
  } else {
    console.log("未找到带有 data-target-id 属性的元素。");
  }
</script>

3.2 选取带有特定数据属性值的所有元素

如果您需要选取所有拥有某个特定data-*属性，并且该属性值也符合特定条件的元素，可以使用document.querySelectorAll()结合属性值选择器[attribute="value"]。

示例： 获取所有 data-id="legacy" 的 div 元素的 data-target-id 值。

<body>
  <div data-target-id="FIRST_VALUE" data-id="legacy"></div>
  <div data-target-id="SECOND_VALUE" data-id="new"></div>
  <div data-target-id="THIRD_VALUE" data-id="legacy"></div>
</body>
<script>
  // 选取所有 'div' 元素中，拥有 'data-id="legacy"' 属性的元素
  const legacyDivs = document.querySelectorAll('div[data-id="legacy"]');

  if (legacyDivs.length > 0) {
    // 遍历所有匹配的元素，并打印它们的 data-target-id 值
    legacyDivs.forEach(div => {
      console.log(div.dataset.targetId);
      // 第一次循环输出: FIRST_VALUE
      // 第二次循环输出: THIRD_VALUE
    });
  } else {
    console.log("未找到 data-id 为 legacy 的 div 元素。");
  }
</script>

4. 总结与注意事项

dataset API： 这是获取自定义数据属性值的标准且推荐的方法。它会自动处理属性名的驼峰转换。
属性选择器： [attribute] 用于选取所有包含该属性的元素，而[attribute="value"]则用于选取属性值完全匹配的元素。
querySelector vs. querySelectorAll：
- querySelector() 返回匹配的第一个元素，如果没有找到则返回null。
- querySelectorAll() 返回一个NodeList（类似数组），包含所有匹配的元素，如果没有找到则返回空的NodeList。需要通过循环（如forEach）来处理每个元素。
浏览器兼容性： dataset API在所有现代浏览器中都得到了良好支持（IE10+）。
命名规范： 建议data-*属性名使用小写字母和连字符，这符合HTML规范，并且在JavaScript中转换为驼峰命名时更直观。
性能： 对于大型DOM结构，频繁使用querySelectorAll可能会有性能开销，但在大多数日常应用中这通常不是问题。如果性能是关键考量，可以考虑更具体的选择器或缓存元素引用。

通过掌握dataset API和CSS属性选择器，您可以灵活地在JavaScript中访问HTML元素的自定义数据，而无需受限于id和class的命名约定，从而实现更强大的DOM操作和数据管理。

好了，本文到此结束，带大家了解了《JS获取自定义属性的正确方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！