HTML中的data-*属性是什么？

在HTML中，data-* 属性是一种自定义属性，用于在HTML元素中嵌入额外的、用户定义的数据。这些属性以 data- 前缀开头，后面可以跟任意合法的标识符（如字母、数字和连接符），使得开发者能够将额外的信息存储在HTML元素中，而不会影响页面的表现或功能。

1. 基本概念

data-* 属性是HTML5引入的特性，目的是为了更方便地在HTML元素中存储数据。通过这样的方式，开发者可以在前端应用程序中轻松访问这些数据，而无需在DOM中添加额外的结构或使用全局变量。

1.1 属性命名规则

• 属性名称必须以 data- 开头。
• 后面的部分可以包含小写字母、数字和连接符（-）。
• 属性值可以是任何字符串，通常是JSON格式的数据、简单的字符串、数字等。

1.2 示例

<div id="user" data-user-id="12345" data-user-role="admin" data-user-name="John Doe">
  用户信息
</div>

在这个示例中，div 元素中使用了三个 data-* 属性，分别用于存储用户的ID、角色和姓名。

2. 访问 data-* 属性

在JavaScript中，你可以使用 dataset 属性访问和操作 data-* 属性。dataset 是一个 DOMStringMap 对象，它包含了所有以 data- 开头的属性。

2.1 访问示例

const userDiv = document.getElementById('user');
console.log(userDiv.dataset.userId); // 输出: "12345"
console.log(userDiv.dataset.userRole); // 输出: "admin"
console.log(userDiv.dataset.userName);