引言
在现代web开发中，我们经常需要在html元素上存储一些额外的数据，以便javascript脚本能够访问和操作。html5引入的自定义数据属性（data-*属性）正是为此目的而生。它们允许开发者在标准html元素上嵌入自定义的、私有的数据，而无需依赖非标准属性或复杂的javascript对象结构。当用户与页面交互（例如通过onchange事件）时，我们常常需要从触发事件的元素中获取这些数据。
场景描述
假设我们有一个动态生成的
<select onchange="sendInfo(this)" class="form-select js-dropdown" data-id="101" name="Item_Id[101]" id="ItemId101" required="required">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>在上述代码中，onchange="sendInfo(this)"将当前
方法一：使用 getAttribute() 获取任意属性
getAttribute()方法是Element接口的一个通用方法，它允许我们获取指定元素的任何属性的值，无论是标准属性（如id, class, name）还是自定义属性（如data-id）。
用法
要使用getAttribute()，只需在元素对象上调用它，并传入您想获取的属性的完整名称作为字符串参数。
立即学习“Java免费学习笔记（深入）”；
function sendInfo(element) {
// 获取选中的值
console.log("选中的值 (value):", element.value);
// 使用 getAttribute() 获取 data-id
const dataId = element.getAttribute('data-id');
console.log("通过 getAttribute() 获取 data-id:", dataId);
}优点
- 通用性强：可以获取元素的任何HTML属性。
- 直接：属性名称与HTML中的写法一致。
缺点
- 对于data-*属性，不如dataset属性简洁。
方法二：利用 dataset 属性获取自定义数据属性
dataset属性是HTMLElement接口的一个只读属性，它提供了一种更简洁、更语义化的方式来访问和操作元素的data-*属性。当您使用dataset时，浏览器会自动将data-前缀剥离，并将连字符分隔的属性名转换为驼峰命名法。
用法
对于一个data-id属性，您可以通过element.dataset.id来访问。如果属性名是data-item-name，则通过element.dataset.itemName访问。
function sendInfo(element) {
// 获取选中的值
console.log("选中的值 (value):", element.value);
// 使用 dataset 属性获取 data-id
const dataId = element.dataset.id; // 注意：data-id 映射为 dataset.id
console.log("通过 dataset 属性获取 data-id:", dataId);
}优点
- 简洁明了：代码更具可读性，专门为data-*属性设计。
- 自动化驼峰命名：自动处理连字符到驼峰命名的转换，方便在JavaScript中使用。
- 语义化：明确表示正在操作数据属性。
缺点
- 仅适用于data-*属性，不能用于获取其他标准HTML属性。
综合示例与对比
为了更清晰地展示两种方法的应用，我们结合上述HTML结构，在一个sendInfo函数中同时使用它们：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取Data属性示例</title>
<style>
body { font-family: sans-serif; margin: 20px; }
select { padding: 8px; border-radius: 4px; border: 1px solid #ccc; }
</style>
</head>
<body>
<h1>请选择一个水果：</h1>
<select onchange="sendInfo(this)" class="form-select js-dropdown" data-id="101" name="Item_Id[101]" id="ItemId101" required="required">
<option value="">请选择</option>
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>
<script>
function sendInfo(element) {
console.log("--- 事件触发 ---");
// 获取选中的值
console.log("选中的值 (value):", element.value);
// 方法一: 使用 getAttribute() 获取 data-id
const dataIdAttr = element.getAttribute('data-id');
console.log("通过 getAttribute() 获取 data-id:", dataIdAttr);
// 方法二: 使用 dataset 属性获取 data-id
const dataIdDataset = element.dataset.id;
console.log("通过 dataset 属性获取 data-id:", dataIdDataset);
console.log("----------------");
}
</script>
</body>
</html>当您在浏览器中运行此代码并更改下拉菜单的选项时，控制台将输出类似以下内容：
--- 事件触发 --- 选中的值 (value): apple 通过 getAttribute() 获取 data-id: 101 通过 dataset 属性获取 data-id: 101 ----------------
注意事项与最佳实践
-
命名转换：dataset属性会自动将data-前缀后的连字符（-）分隔的属性名转换为驼峰命名法。例如：
- data-id 对应 dataset.id
- data-user-name 对应 dataset.userName
- data-item-price 对应 dataset.itemPrice 请务必记住这个转换规则，否则可能无法正确访问属性。
-
选择方法：
- 如果您只需要获取或设置data-*属性，强烈推荐使用dataset属性，因为它更简洁、更具可读性，并且是专门为此目的设计的。
- 如果您需要获取或设置任何类型的HTML属性（包括data-*属性和标准属性），或者需要更通用的解决方案，getAttribute()和setAttribute()是更合适的选择。
-
获取不存在的属性：
- 如果使用getAttribute()获取一个不存在的属性，它将返回null。
- 如果使用dataset属性访问一个不存在的data-*属性，它将返回undefined。在实际开发中，应注意对这些情况进行判断，以避免潜在的错误。
浏览器兼容性：dataset属性在现代浏览器中得到了广泛支持（IE10+），如果需要支持更旧的浏览器（如IE9及以下），则必须使用getAttribute()。不过，在当前Web开发中，dataset已成为主流。
总结
在JavaScript中获取HTML元素的自定义数据属性data-*，主要有两种有效方法：getAttribute()和dataset属性。getAttribute()提供了一种通用且直接的方式来获取任何HTML属性，而dataset属性则为data-*属性提供了更简洁、更语义化的访问接口，并自动处理命名转换。理解这两种方法的特点和适用场景，可以帮助开发者编写出更高效、更易维护的JavaScript代码。在大多数现代Web应用中，对于data-*属性的操作，dataset属性通常是首选。
