在Web开发中，我们经常需要把一些额外信息附着在HTML元素上，例如用户ID、商品编号或组件状态。HTML5提供的以data-开头的自定义数据属性，正是为了解决这类需求而设计的。在JavaScript里，获取这些属性的值有多种方式，理解它们的差异能帮你写出更健壮的代码。
使用dataset对象读取
现代浏览器为所有元素提供了dataset属性，它是一个DOMStringMap对象，专门用于访问data-开头的属性。浏览器会自动将形如data-user-id的属性名转换为驼峰式的userId键名。这种方式可读性最好，也是官方推荐做法。
下面的例子展示了一个带有多个自定义属性的按钮，以及如何通过dataset获取它们：
<button id="btn" data-user-id="1001" data-role="admin" data-is-vip="true">操作</button>
const btn = document.getElementById('btn');
// 连字符转驼峰
console.log(btn.dataset.userId); // "1001"
console.log(btn.dataset.role); // "admin"
console.log(btn.dataset.isVip); // "true"
// 遍历所有data属性
for (const key in btn.dataset) {
console.log(key, btn.dataset[key]);
}
可以看到，dataset把所有自定义数据集中管理，避免了拼写完整属性名的麻烦。不过要记住，无论原始值是什么类型，从dataset中取出来的都是字符串，后续若需数字或布尔判断必须转换。
当动态设置数据时，也可以直接给dataset赋值，浏览器会自动加上data-前缀并转换键名：
btn.dataset.score = "98"; // 对应 DOM 属性 data-score="98"
console.log(btn.getAttribute('data-score')); // "98"
使用getAttribute方法
在dataset普及之前，开发者通常使用getAttribute配合完整属性名来读取自定义数据。这种方法兼容到非常老的浏览器，且在属性名不符合驼峰映射规则时更直接。
示例代码如下：
const btn = document.getElementById('btn');
const uid = btn.getAttribute('data-user-id');
console.log(uid); // "1001"
getAttribute的优势在于你不需要关心命名转换，尤其当后端生成的属性名包含多个连字符或特殊单词时，写全称最不容易出错。缺点是代码稍显冗长，且无法像dataset那样方便地枚举所有data属性。
如果项目需要支持IE10及以下环境，那么dataset不可用，只能依靠getAttribute。不过目前主流应用早已不再考虑此类老旧浏览器，因此新项目建议统一用dataset。
两种方式的对比与注意事项
为了更直观地理解差异，我们可以从语义、兼容性和使用场景三个维度比较：
| 方式 | 可读性 | 浏览器支持 | 枚举便利度 |
|---|---|---|---|
| dataset | 高，驼峰键名 | IE11及以上 | 高，可直接遍历 |
| getAttribute | 中，需写全名 | 几乎所有浏览器 | 低，需手动筛选 |
一个常见误区是认为dataset会自动进行类型转换。实际上它永远返回字符串，下面这段代码就可能产生非预期结果：
const num = btn.dataset.userId; console.log(num + 1); // "10011" 而非 1002
正确做法是用Number或parseInt处理：
const id = Number(btn.dataset.userId); console.log(id + 1); // 1002
另外，若自定义属性通过setAttribute动态添加，dataset同样可以立即读取，因为两者操作的是同一份DOM数据。在事件委托场景中，利用event.target.dataset能快速拿到触发元素的信息，而无需额外查找。
结合实际场景的运用
假设我们有一个商品列表，每个卡片都带有data-price和data-stock，点击时要计算总价。借助dataset可以让逻辑非常简洁：
<div class="item" data-price="29.9" data-stock="5">商品A</div> <div class="item" data-price="15.0" data-stock="0">商品B</div>
document.querySelectorAll('.item').forEach(el => {
const price = parseFloat(el.dataset.price);
const stock = parseInt(el.dataset.stock, 10);
if (stock > 0) {
console.log('可购买，单价', price);
} else {
console.log('已售罄');
}
});
这种写法把渲染与数据绑定在一起，减少了JS内部维护状态的成本。只要后端模板输出时填上data属性，前端就能直接消费，非常适合轻量级交互页面。
总结来说，获取HTML元素的自定义data-属性值，优先使用dataset以获得清晰语法和便利的遍历能力；在特殊兼容需求下再用getAttribute。无论哪种方式，都要注意字符串类型的转换，才能避免隐蔽的计算错误。
JavaScriptdata_attributeDOM_API修改时间：2026-08-03 00:51:26