JavaScript中获取HTML元素自定义数据属性（data-）的实用指南-js教程-PHP中文网

JavaScript中获取HTML元素自定义数据属性（data-）的实用指南

花韻仙語

发布： 2025-10-08 09:57:01

原创

383人浏览过

JavaScript中获取HTML元素自定义数据属性（data-）的实用指南

本文详细介绍了在JavaScript事件处理中，如何高效地从HTML元素中获取自定义数据属性（data-*）。我们将探讨两种主要方法：通用的getAttribute()方法和专为数据属性设计的dataset属性，并通过具体示例代码演示它们的应用，帮助开发者根据场景选择最合适的获取方式。

引言

在现代web开发中，我们经常需要在html元素上存储一些额外的数据，以便javascript脚本能够访问和操作。html5引入的自定义数据属性（data-*属性）正是为此目的而生。它们允许开发者在标准html元素上嵌入自定义的、私有的数据，而无需依赖非标准属性或复杂的javascript对象结构。当用户与页面交互（例如通过onchange事件）时，我们常常需要从触发事件的元素中获取这些数据。

场景描述

假设我们有一个动态生成的<select>下拉菜单，其中包含一个自定义的data-id属性，用于标识该行的唯一ID。当用户选择不同的选项时，我们希望在JavaScript函数中不仅获取选中的值，还能获取到这个data-id。

<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)"将当前<select>元素作为参数传递给sendInfo函数。我们的目标是在sendInfo函数内部获取data-id的值。

方法一：使用 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属性通常是首选。

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