本教程详细介绍了在JavaScript事件处理函数中，如何从HTML元素中获取自定义数据属性（如data-id）。我们将探讨两种主要方法：通用的getAttribute()函数和更便捷的dataset属性。通过示例代码，您将学习如何在onchange等事件触发时，准确地获取所需的数据，从而实现更灵活的交互逻辑。
在现代web开发中，我们经常需要在html元素上存储一些不直接影响视觉表现但对javascript逻辑至关重要的数据。html5引入的自定义数据属性（data-*）正是为此目的而生。例如，我们可能在一个 元素上添加一个 data-id 属性，用于标识该下拉菜单关联的特定数据记录id。当用户与该元素交互（如选择一个选项）时，我们希望在javascript函数中获取这个 data-id 值。
考虑以下HTML片段：
苹果 香蕉 橙子
在这个例子中，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.iddata-user-name 会变成 dataset.userNamedata-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结构：
请选择 笔记本电脑 智能手机 平板电脑
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 来处理自定义数据属性，因为它能让代码更清晰、更易于维护。理解并熟练运用这两种方法，将大大提高您在前端开发中处理元素数据的效率和灵活性。
以上就是JavaScript中获取HTML元素自定义数据属性（data-*）的方法详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1527655.html
微信扫一扫 
支付宝扫一扫 
