在现代web开发中，我们经常需要在html元素上存储一些不直接影响视觉表现但对javascript逻辑至关重要的数据。html5引入的自定义数据属性（data-*）正是为此目的而生。例如，我们可能在一个 <select> 元素上添加一个 data-id 属性，用于标识该下拉菜单关联的特定数据记录id。当用户与该元素交互（如选择一个选项）时，我们希望在javascript函数中获取这个 data-id 值。
考虑以下HTML片段：
<select onchange="sendInfo(this)" class="form-select js-dropdown" data-id="user_123" name="Item_Id[user_123]" id="ItemId_user_123" required="required">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>在这个例子中，data-id="user_123" 是我们希望在 sendInfo(this) 函数中获取的目标。下面将介绍两种实现方式。
方法一：使用 getAttribute() 函数
getAttribute() 是 Element 接口的一个方法，用于获取指定属性的值。它是一个通用的方法，可以获取任何HTML属性，包括标准的HTML属性（如 id, class, name）以及自定义的 data-* 属性。
语法：element.getAttribute(attributeName)
立即学习“Java免费学习笔记（深入）”；
其中 element 是目标HTML元素，attributeName 是一个字符串，表示要获取的属性的完整名称。
示例代码： 假设我们的JavaScript函数 sendInfo 接收到的是触发事件的元素本身（通过 this 关键字传递）。
function sendInfo(element) {
// 获取选中的值（例如：apple, banana等）
const selectedValue = element.value;
console.log('选中的值:', selectedValue);
// 使用 getAttribute() 获取 data-id 属性的值
const dataId = element.getAttribute('data-id');
console.log('数据ID (getAttribute):', dataId);
}注意事项：
- attributeName 必须是属性的完整名称，包括 data- 前缀。
- 如果指定的属性不存在，getAttribute() 将返回 null。
方法二：使用 dataset 属性
HTMLElement 接口提供了一个 dataset 属性，它返回一个 DOMStringMap 对象，其中包含了元素所有 data-* 属性的键值对。dataset 属性专门用于处理 data-* 属性，提供了一种更简洁、更语义化的访问方式。
特点：dataset 属性会自动将 data-* 属性名转换为驼峰命名法（camelCase）。例如：
- data-id 会变成 dataset.id
- data-user-name 会变成 dataset.userName
- data-item-price-usd 会变成 dataset.itemPriceUsd
示例代码：
function sendInfo(element) {
// 获取选中的值
const selectedValue = element.value;
console.log('选中的值:', selectedValue);
// 使用 dataset 属性获取 data-id 的值
// 注意：这里直接使用 .id，而不是 .data-id
const dataId = element.dataset.id;
console.log('数据ID (dataset):', dataId);
// 如果HTML中存在 data-user-role="admin" 这样的属性，
// 则可以通过 element.dataset.userRole 访问
// const userRole = element.dataset.userRole;
// console.log('用户角色 (dataset):', userRole);
}注意事项：
- 访问时不需要 data- 前缀。
- 需要注意 data-* 属性名到驼峰命名法的转换规则。
完整示例与比较
结合上述两种方法，以下是一个完整的示例，展示如何在同一个事件处理函数中获取自定义数据属性。
HTML结构：
<select onchange="handleSelectionChange(this)" class="form-select js-dropdown"
data-id="product_456" data-category="electronics" id="productSelect">
<option value="">请选择</option>
<option value="laptop">笔记本电脑</option>
<option value="smartphone">智能手机</option>
<option value="tablet">平板电脑</option>
</select>JavaScript代码：
function handleSelectionChange(selectElement) {
// 获取选中的值
const selectedValue = selectElement.value;
console.log('选中的产品:', selectedValue);
// 方法一：使用 getAttribute() 获取属性
const productIdUsingGetAttribute = selectElement.getAttribute('data-id');
const productCategoryUsingGetAttribute = selectElement.getAttribute('data-category');
console.log('产品ID (getAttribute):', productIdUsingGetAttribute);
console.log('产品分类 (getAttribute):', productCategoryUsingGetAttribute);
// 方法二：使用 dataset 属性获取属性
const productIdUsingDataset = selectElement.dataset.id;
const productCategoryUsingDataset = selectElement.dataset.category; // data-category -> dataset.category
console.log('产品ID (dataset):', productIdUsingDataset);
console.log('产品分类 (dataset):', productCategoryUsingDataset);
// 假设还有 data-manufacturing-date="2023-01-15"
// const manufacturingDate = selectElement.dataset.manufacturingDate;
// console.log('生产日期 (dataset):', manufacturingDate);
}何时选择哪种方法？
- getAttribute(): 适用于获取任何类型的HTML属性，包括标准属性（如 id, class）和自定义 data-* 属性。当你需要处理非 data-* 的属性，或者对属性名称有严格的字符串匹配需求时，它更为通用。
- dataset: 专门为 data-* 属性设计，提供更简洁、更直观的访问方式。它会自动处理命名转换（如 data-user-name 转换为 dataset.userName），使代码更具可读性。在处理自定义数据属性时，dataset 通常是首选，因为它更符合语义，且代码更精炼。
总结
无论是使用 getAttribute() 还是 dataset 属性，我们都能有效地在JavaScript中获取HTML元素的自定义数据属性。getAttribute() 提供了一种通用的属性访问机制，而 dataset 则为 data-* 属性提供了更专门、更便捷的访问方式。在实际开发中，建议优先使用 dataset 来处理自定义数据属性，因为它能让代码更清晰、更易于维护。理解并熟练运用这两种方法，将大大提高您在前端开发中处理元素数据的效率和灵活性。
