当前位置：首页 > 文章列表 > 文章 > 前端 > 获取HTML自定义数据属性的JS方法教程

获取HTML自定义数据属性的JS方法教程

2025-10-09 16:57:36 0浏览收藏

还在为如何在JavaScript中获取HTML元素的自定义数据属性而烦恼吗？本文为你提供详尽的JS教程，聚焦于`data-*`属性的获取。我们将深入探讨两种核心方法：通用的`getAttribute()`函数和专为`data-*`属性设计的`dataset`属性。通过代码示例和对比分析，让你清晰了解它们的语法、特点以及适用场景。无论你需要获取`data-id`等自定义属性，还是处理动态生成的属性值，本文都能帮助你选择最合适的方案，编写出更高效、更易维护的JavaScript代码。掌握这些技巧，轻松应对Web开发中数据获取的挑战，提升你的前端开发技能！立即学习，让你的代码更简洁、更具可读性！

从HTML元素中获取自定义数据属性（data-）的JavaScript教程

本教程详细阐述了如何在JavaScript中，特别是通过事件处理函数，高效地从HTML元素中获取自定义数据属性（如data-id）。文章将介绍两种核心方法：通用的getAttribute()函数和专为data-*属性设计的dataset`属性，并通过代码示例和对比分析，帮助开发者选择最合适的方案。

场景描述：从HTML元素获取自定义数据

在Web开发中，我们经常需要将一些额外的数据附加到HTML元素上，以便在JavaScript中进行处理。HTML5引入的data-*自定义数据属性为此提供了一种标准且语义化的方式。例如，你可能有一个动态生成的下拉菜单，每个选项都关联一个唯一的data-id，当用户选择某个选项时，你需要获取这个data-id进行后续操作。

考虑以下HTML <select> 元素示例，其中包含一个data-id属性：

&lt;select onchange=&quot;sendInfo(this)&quot; class=&quot;form-select js-dropdown&quot; data-id=&quot;123&quot; name=&quot;Item_Id[1]&quot; id=&quot;ItemId1&quot; required=&quot;required&quot;&gt;
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
&lt;/select&gt;

当此下拉菜单的值发生变化时，onchange="sendInfo(this)" 会触发 sendInfo JavaScript 函数，并将当前触发事件的元素（即 <select> 元素本身）作为参数 this 传递给函数。在 sendInfo 函数内部，我们不仅需要获取选中的值 (e.value)，还需要获取该元素的自定义属性 data-id。

方法一：使用 getAttribute() 获取属性值

Element.getAttribute() 方法是一个通用的DOM API，用于获取指定元素上某个属性的字符串值。它适用于获取任何HTML属性，包括标准的属性（如id, name, class）和自定义的data-*属性。

语法：element.getAttribute(attributeName)

其中 attributeName 是你想要获取的属性的完整名称，例如 'data-id'。

示例代码：

function sendInfo(e) {
  // e 是触发事件的 &lt;select&gt; 元素
  console.log("选中的值:", e.value);

  // 使用 getAttribute() 获取 data-id
  const dataId = e.getAttribute('data-id');
  console.log("获取到的 data-id (使用 getAttribute):", dataId);
}

特点：

通用性强： 可以获取任何HTML属性的值。
直接： 通过属性的完整字符串名称来访问。

方法二：使用 dataset 属性获取 data-* 值

HTMLElement.dataset 属性提供了一种更简洁、更语义化的方式来访问元素的 data-* 属性。它返回一个 DOMStringMap 对象，其中包含了元素上所有 data-* 属性的键值对。使用 dataset 时，data- 前缀会被省略，并且如果属性名中包含连字符，它会自动转换为驼峰命名法。

语法：element.dataset.keyName

其中 keyName 是 data-* 属性名中 data- 之后的部分，并转换为驼峰命名。例如，data-id 对应 dataset.id，data-user-name 对应 dataset.userName。

示例代码：

function sendInfo(e) {
  // e 是触发事件的 &lt;select&gt; 元素
  console.log("选中的值:", e.value);

  // 使用 dataset 属性获取 data-id
  const dataId = e.dataset.id; // 注意：data-id 对应 dataset.id
  console.log("获取到的 data-id (使用 dataset):", dataId);
}

特点：

*专为 `data-` 设计：** 更符合语义化，代码更清晰。
自动驼峰命名： 处理包含连字符的属性名时更方便。
简洁性： 访问 data-* 属性时代码量更少。

两种方法的对比与选择

特性	getAttribute()	dataset
适用范围	任何HTML属性（标准或自定义）	仅限 data-* 自定义属性
访问方式	通过完整的字符串属性名（如 'data-id'）	通过 dataset 对象，省略 data- 前缀，并自动转驼峰命名（如 dataset.id）
简洁性	稍显冗长	对于 data-* 属性更简洁
兼容性	广泛支持（老旧浏览器也支持）	现代浏览器支持良好（IE10+）

何时选择哪种方法：

推荐 dataset： 当你需要访问元素的 data-* 属性时，dataset 是更现代、更推荐的选择，因为它更简洁、更具可读性，并且专为此目的设计。
使用 getAttribute()： 当你需要获取非 data-* 的标准HTML属性（如 href, src, alt 等），或者需要支持非常老的浏览器时，getAttribute() 是唯一的选择。

注意事项

确保获取正确的DOM元素： 在事件处理函数中，this 关键字通常指向触发事件的元素。如果事件监听器是通过 addEventListener 添加的，那么事件对象 event 的 event.target 属性将指向触发事件的元素。确保你的函数参数 e 正确地代表了你想要操作的DOM元素。
属性不存在的处理： 如果你尝试获取一个不存在的属性，getAttribute() 会返回 null，而 dataset 属性会返回 undefined。在实际应用中，你可能需要进行判断以避免潜在的错误：
```
const dataId = e.dataset.id;
if (dataId !== undefined) {
    // 属性存在，进行操作
} else {
    // 属性不存在
}
```
动态生成属性： 如果你的 data-id 值是动态生成的（如示例中的 '+counter+'），确保在HTML字符串拼接时，属性值被正确地引用和赋值。

总结

掌握从HTML元素中获取自定义数据属性的方法是前端开发中的一项基本技能。无论是使用通用的 getAttribute() 还是更现代、更专注于 data-* 属性的 dataset，理解它们的用法和适用场景，都能帮助你编写出更高效、更可维护的JavaScript代码。在多数情况下，对于 data-* 属性，dataset 将是你的首选工具。

以上就是《获取HTML自定义数据属性的JS方法教程》的详细内容，更多关于的资料请关注golang学习网公众号！