在前端开发中，我们常常需要给HTML元素存储一些自定义的额外数据，这时候data属性就派上了用场。它是HTML5引入的标准自定义属性规范，所有以data-开头的属性都属于data属性，我们可以在JavaScript中读取这些属性的值来完成业务逻辑。
data属性的基本命名规则
data属性的命名需要遵循一定的规范，否则可能会导致读取时出现不符合预期的结果。首先，属性名必须以data-开头，后面可以跟小写字母、数字、连字符-，但是不建议使用大写字母，因为在读取时会有自动转换规则。
当我们使用dataset属性读取时，data属性名中的连字符会被去掉，后面的部分会转换为驼峰命名法。比如data-user-name对应的dataset属性名是userName，data-age对应的是age。
使用getAttribute方法读取
getAttribute是DOM元素自带的方法，它可以读取元素上任意属性的值，包括data属性。使用这种方式读取时，需要传入完整的属性名，包括data-前缀。
基本使用示例
我们先在HTML中定义一个带有data属性的元素：
<div id="userCard" data-user-id="1001" data-user-name="张三" data-age="25">用户卡片</div>
然后使用getAttribute读取对应的值：
// 获取元素
const userCard = document.getElementById('userCard');
// 读取data-user-id的值
const userId = userCard.getAttribute('data-user-id');
console.log(userId); // 输出 "1001"
console.log(typeof userId); // 输出 "string"
// 读取data-user-name的值
const userName = userCard.getAttribute('data-user-name');
console.log(userName); // 输出 "张三"
// 读取不存在的data属性，返回null
const userEmail = userCard.getAttribute('data-user-email');
console.log(userEmail); // 输出 null
getAttribute方法的特点
- 读取到的值永远是字符串类型，即使属性设置的是数字，也需要手动转换类型
- 必须传入完整的属性名，包括
data-前缀，否则会读取不到值 - 可以读取所有标准的data属性，不受命名转换规则影响
- 如果属性不存在，返回
null
使用dataset属性读取
HTML5之后，DOM元素新增了dataset属性，它是一个DOMStringMap类型的对象，专门用来存储和读取元素的data属性值，使用起来比getAttribute更简洁。
基本使用示例
还是使用上面的HTML元素，我们用dataset来读取data属性：
const userCard = document.getElementById('userCard');
// 读取data-user-id，对应dataset的userId属性
const userId = userCard.dataset.userId;
console.log(userId); // 输出 "1001"
// 读取data-user-name，对应dataset的userName属性
const userName = userCard.dataset.userName;
console.log(userName); // 输出 "张三"
// 读取data-age，对应dataset的age属性
const age = userCard.dataset.age;
console.log(age); // 输出 "25"
console.log(typeof age); // 输出 "string"
// 读取不存在的属性，返回undefined
const userEmail = userCard.dataset.userEmail;
console.log(userEmail); // 输出 undefined
dataset的命名转换规则
使用dataset时，属性名的转换规则需要特别注意，否则很容易写错对应的属性名：
- 原始的data属性名去掉
data-前缀 - 剩下的部分中，所有的连字符-后面的第一个字母会转换为大写，连字符本身会被去掉
- 如果原始的data属性名中没有连字符，那么直接使用去掉
data-后的部分作为dataset的属性名 - dataset的属性名是驼峰命名，所以书写时需要注意大小写，比如
data-user-name对应userName，不是user-name
下面是一些常见的转换对照表：
| HTML中的data属性 | dataset对应的属性名 |
|---|---|
| data-id | id |
| data-user-id | userId |
| data-user-full-name | userFullName |
| data-age | age |
dataset的其他操作
dataset不仅可以读取data属性的值，还可以修改和添加data属性：
const userCard = document.getElementById('userCard');
// 修改已有的data属性
userCard.dataset.age = '26';
console.log(userCard.getAttribute('data-age')); // 输出 "26"
// 添加新的data属性
userCard.dataset.userEmail = 'test@ipipp.com';
console.log(userCard.getAttribute('data-user-email')); // 输出 "test@ipipp.com"
// 删除data属性
delete userCard.dataset.age;
console.log(userCard.getAttribute('data-age')); // 输出 null
两种读取方式的区别
在实际开发中，我们可以根据场景选择使用getAttribute还是dataset：
| 对比项 | getAttribute | dataset |
|---|---|---|
| 属性名写法 | 需要写完整的data-前缀属性名 | 使用驼峰命名的属性名，不需要写data-前缀 |
| 不存在时的返回值 | 返回null | 返回undefined |
| 兼容性 | 所有浏览器都支持，包括旧版IE | 不支持IE10及以下版本 |
| 适用场景 | 需要兼容旧浏览器，或者需要读取完整的属性名 | 现代浏览器环境，代码更简洁，需要频繁操作data属性 |
注意事项
读取到的data属性值默认都是字符串类型，如果需要其他类型，需要手动转换，比如数字可以用Number()，布尔值可以用JSON.parse()或者判断字符串值。
如果data属性的值包含特殊字符，比如<、>，在HTML中设置时需要正确转义，否则会导致HTML解析错误。比如要设置data属性值为a<b，应该写成data-info="a<b"。
不要在data属性中存储复杂的数据结构，比如对象或者数组，虽然可以存储JSON字符串然后解析，但是更推荐用其他方式管理复杂数据，data属性更适合存储简单的字符串、数字等基础类型数据。
完整示例
下面是一个完整的示例，演示两种读取方式的使用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>读取data属性示例</title>
</head>
<body>
<div id="product" data-product-id="2001" data-product-name="笔记本电脑" data-price="4999" data-stock="50">
商品信息
</div>
<script>
const product = document.getElementById('product');
// 使用getAttribute读取
console.log('getAttribute读取结果：');
console.log('产品ID：', product.getAttribute('data-product-id'));
console.log('产品名称：', product.getAttribute('data-product-name'));
console.log('价格（字符串）：', product.getAttribute('data-price'));
// 使用dataset读取
console.log('dataset读取结果：');
console.log('产品ID：', product.dataset.productId);
console.log('产品名称：', product.dataset.productName);
console.log('价格（字符串）：', product.dataset.price);
console.log('库存（转换为数字）：', Number(product.dataset.stock));
// 修改data属性
product.dataset.price = '5299';
console.log('修改后的价格：', product.getAttribute('data-price'));
</script>
</body>
</html>
JavaScriptHTML_data_属性getAttributeDOM操作dataset修改时间：2026-06-17 14:06:56