一：定义

1：HTML 中前缀为 data- 开头的元素属性称为‌自定义数据属性‌

2：以 data- 为前缀的属性用于在 HTML 元素中存储与页面或应用相关的私有自定义数据，

3：允许开发者将额外信息嵌入元素中，供 JavaScript 等脚本语言动态读取和操作‌

二：用途

1：存储与元素相关的额外信息，不依赖服务端查询或额外 DOM 结构‌

2：便于前端脚本直接获取数据，提升交互体验

三：规则

1：命名上：

必须以 data- 开头，后接小写字母，多单词用连字符分隔

属性值可以是任意字符串，按需定义‌

四：代码

<div id="user" data-user-id="123" data-role="admin"></div>

五：在 JavaScript 中访问

1：通过 dataset 对象

const userDiv = document.getElementById('user');
console.log(userDiv.dataset.userId);    // 输出 "123"
console.log(userDiv.dataset.role);      // 输出 "admin" ‌:ml-citation{ref="1,2" data="citationList"}

2：‌通过 getAttribute 方法

console.log(userDiv.getAttribute('data-user-id'));  // 输出 "123" ‌:ml-citation{ref="1" data="citationList"}

六：总结

1：自定义数据属性‌仅用于存储非关键数据‌，避免存储敏感信息‌

2：浏览器会忽略这些属性的默认渲染，需通过脚本主动处理‌