在现代web开发中，我们经常需要在html元素上存储一些额外的数据，以便在javascript中进行操作，而这些数据并不直接用于元素的样式或标准行为。html5引入的自定义数据属性（data-*属性）正是为此目的而生。当用户与页面交互（例如，通过select元素的onchange事件）时，我们可能需要获取这些data-*属性中存储的值。
考虑以下HTML结构，其中一个
在上述示例中，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）指向触发事件的
优点：
- 通用性强，可以获取任何HTML属性的值。
- 直接使用属性的完整名称。
缺点：
- 对于data-*属性，不如dataset属性简洁。
方法二：使用 dataset 属性
dataset 属性是HTMLElement接口的一个特殊属性，专门用于访问元素的data-*属性。它返回一个DOMStringMap对象，其中包含了所有data-*属性的键值对。使用dataset的优势在于其简洁性和对data-*属性的语义化支持。
当使用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属性。
两种方法的对比与选择
| 特性 | getAttribute('data-id') | dataset.id |
|---|---|---|
| 适用范围 | 任何HTML属性 | 仅限data-*属性 |
| 语法 | element.getAttribute('属性名') | element.dataset.属性名 |
| 命名转换 | 无，直接使用完整属性名 | data-前缀移除，烤串命名转驼峰命名 |
| 简洁性 | 较通用 | 更简洁，语义化强 |
| 推荐场景 | 获取非data-*属性，或需要动态构造属性名时 | 获取data-*属性时，推荐使用 |
通常情况下，对于data-*属性，我们更推荐使用dataset属性，因为它提供了更简洁、更符合JavaScript习惯的访问方式。只有当需要获取非data-*属性，或者属性名需要动态拼接时，才考虑使用getAttribute()。
注意事项
- this的上下文： 在HTML事件处理函数中（如onchange="sendInfo(this)"），this关键字会指向触发事件的DOM元素本身。将其作为参数传递给JavaScript函数是一种常见的做法。
-
属性不存在时的行为：
- getAttribute()：如果指定属性不存在，会返回null。
- dataset：如果对应的data-*属性不存在，会返回undefined。
- 在实际开发中，建议在使用获取到的值之前进行非空或非undefined检查，以避免潜在的运行时错误。
- 浏览器兼容性： getAttribute()和dataset属性都具有非常广泛的浏览器支持，可以放心使用。
总结
在JavaScript中获取HTML元素的自定义数据属性（data-*）值是实现动态交互式Web应用的关键一环。无论是通过通用的getAttribute()方法，还是专为data-*属性设计的dataset属性，开发者都能高效地访问这些附加信息。根据具体场景和个人偏好，选择最适合的方法可以提升代码的清晰度和维护性。对于data-*属性，dataset通常是更优的选择，因为它提供了更直观和简洁的语法。
