在JavaScript中获取HTML元素的自定义数据属性（data-）值

在现代web开发中，我们经常需要在html元素上存储一些额外的数据，以便在javascript中进行操作，而这些数据并不直接用于元素的样式或标准行为。html5引入的自定义数据属性（data-*属性）正是为此目的而生。当用户与页面交互（例如，通过select元素的onchange事件）时，我们可能需要获取这些data-*属性中存储的值。

考虑以下HTML结构，其中一个<select>元素包含了一个自定义属性data-id：

<select onchange="sendInfo(this)" 
        class="form-select js-dropdown" 
        data-id="123" 
        name="Item_Id[0]" 
        id="ItemId0" 
        required="required">
    <option value="option1">选项一</option>
    <option value="option2">选项二</option>
</select>

在上述示例中，data-id="123"是我们希望在JavaScript函数sendInfo中获取的值。以下是两种常用的方法来实现这一目标。

方法一：使用 getAttribute() 方法

getAttribute() 方法是DOM元素接口提供的一个通用方法，用于获取指定属性的值。它适用于任何HTML属性，包括自定义的data-*属性。

示例代码：

立即学习“Java免费学习笔记（深入）”；

function sendInfo(element) {
  // 获取当前选中的值（例如：option1 或 option2）
  console.log("当前选中值:", element.value); 

  // 使用 getAttribute() 获取 data-id 属性的值
  const dataId = element.getAttribute('data-id');
  console.log("data-id (通过 getAttribute):", dataId);
}

在上述sendInfo函数中，element参数（即this）指向触发事件的<select>元素。通过调用element.getAttribute('data-id')，我们可以直接获取到data-id属性所对应的值。

优点：

• 通用性强，可以获取任何HTML属性的值。
• 直接使用属性的完整名称。

缺点：

• 对于data-*属性，不如dataset属性简洁。

方法二：使用 dataset 属性

dataset 属性是HTMLElement接口的一个特殊属性，专门用于访问元素的data-*属性。它返回一个DOMStringMap对象，其中包含了所有data-*属性的键值对。使用dataset的优势在于其简洁性和对data-*属性的语义化支持。

百度文心百中

百度大模型语义搜索体验中心

22

查看详情

当使用dataset时，data-前缀会被移除，并且属性名会从烤串命名法（kebab-case，如data-custom-attribute）转换为驼峰命名法（camelCase，如customAttribute）。

示例代码：

立即学习“Java免费学习笔记（深入）”；

function sendInfo(element) {
  // 获取当前选中的值
  console.log("当前选中值:", element.value);

  // 使用 dataset 属性获取 data-id 的值
  // data-id 会被转换为 dataset.id
  const dataId = element.dataset.id; 
  console.log("data-id (通过 dataset):", dataId);

  // 如果有 data-custom-attribute="value"，则通过 element.dataset.customAttribute 获取
  // const customAttr = element.dataset.customAttribute;
  // console.log("data-custom-attribute:", customAttr);
}

优点：

• 专门为data-*属性设计，代码更简洁、可读性更高。
• 自动处理命名转换（烤串命名法转驼峰命名法），更符合JavaScript的命名习惯。

缺点：

• 仅适用于data-*属性，无法获取其他标准HTML属性。

两种方法的对比与选择

通常情况下，对于data-*属性，我们更推荐使用dataset属性，因为它提供了更简洁、更符合JavaScript习惯的访问方式。只有当需要获取非data-*属性，或者属性名需要动态拼接时，才考虑使用getAttribute()。

注意事项

1. this的上下文： 在HTML事件处理函数中（如onchange="sendInfo(this)"），this关键字会指向触发事件的DOM元素本身。将其作为参数传递给JavaScript函数是一种常见的做法。
2. 属性不存在时的行为：
   • getAttribute()：如果指定属性不存在，会返回null。
   • dataset：如果对应的data-*属性不存在，会返回undefined。
   • 在实际开发中，建议在使用获取到的值之前进行非空或非undefined检查，以避免潜在的运行时错误。
3. 浏览器兼容性： getAttribute()和dataset属性都具有非常广泛的浏览器支持，可以放心使用。

总结

在JavaScript中获取HTML元素的自定义数据属性（data-*）值是实现动态交互式Web应用的关键一环。无论是通过通用的getAttribute()方法，还是专为data-*属性设计的dataset属性，开发者都能高效地访问这些附加信息。根据具体场景和个人偏好，选择最适合的方法可以提升代码的清晰度和维护性。对于data-*属性，dataset通常是更优的选择，因为它提供了更直观和简洁的语法。

以上就是在JavaScript中获取HTML元素的自定义数据属性（data-）值的详细内容，更多请关注php中文网其它相关文章！