数据属性（data attributes）是 HTML5 引入的一种机制，用于在不干扰元素展示和行为的前提下，将自定义数据嵌入到 HTML 元素中。这种机制允许开发者将应用程序需要的信息直接绑定在元素上，便于后续通过 JavaScript 进行读取和操作。下面详细解释数据属性的各个方面：
1. 定义与语法规则
-
前缀要求：
所有自定义数据属性必须以data-开头，这是 HTML5 的标准要求。这样做的目的是明确区分标准 HTML 属性与开发者自定义的属性，从而避免命名冲突。例如：<div data-user-id="12345" data-role="admin">用户信息</div>上述代码中，
data-user-id与data-role都是合法的数据属性。 -
命名规范：
数据属性的名称除了必须以data-开头之外，后面的部分可以是任意由字母、数字和连字符组成的字符串。虽然 HTML 属性不区分大小写，但为了保证跨浏览器一致性，通常建议使用全小写字母并用连字符分隔单词，例如data-user-id而非data-userID。
2. 如何在 JavaScript 中访问数据属性
- dataset 属性：
浏览器会将所有以data-开头的属性映射到 DOM 元素的dataset对象中。这个对象是一个 DOMStringMap，可以像访问普通对象属性一样读取或修改数据属性。访问时，属性名会进行转换：- 移除
data-前缀； - 将连字符后面的字符转换为驼峰式（camelCase）。
在这个例子中，<button id="myButton" data-user-id="12345" data-role="admin">点击我</button> <script>const button = document.getElementById('myButton');// 输出：{ userId: "12345", role: "admin" }console.log(button.dataset);// 分别访问具体的数据属性console.log(button.dataset.userId); // 输出："12345"console.log(button.dataset.role); // 输出："admin"// 修改数据属性button.dataset.userId = "67890";console.log(button.dataset.userId); // 输出："67890" </script>data-user-id被映射为dataset.userId，而data-role则变成了dataset.role。 - 移除
3. 数据属性的应用场景
-
分离数据与表现：
数据属性允许开发者将应用数据嵌入到 HTML 中，而无需依赖额外的全局变量或复杂的数据绑定机制，从而实现数据与样式、行为的分离。 -
增强交互性：
在需要根据页面上特定元素的状态或属性进行动态交互时，可以通过数据属性存储相关信息，后续通过 JavaScript 读取这些信息，从而改变页面交互逻辑或视觉效果。 -
无侵入性扩展：
数据属性不会影响页面的语义和样式，因此非常适合在不改变现有 HTML 结构的情况下扩展额外数据，提升页面的可维护性和扩展性。
4. 注意事项
-
严格遵循前缀：
如果不以data-开头，则该属性不会被归类为数据属性，也无法通过dataset对象访问。 -
属性名转换：
由于dataset属性会将带有连字符的数据属性转换为驼峰命名，所以在编写和访问数据属性时应保持一致性，建议使用全小写并用连字符分隔，以避免意外的命名错误。 -
非可见性：
数据属性本质上是存储在元素上的额外信息，对用户不可见，也不会直接影响元素的样式。它们仅用于开发者在 JavaScript 中存取数据。
参考资料
根据 MDN 关于 HTML data 属性 的解释以及 HTML5 标准文档，数据属性是为了解决开发过程中数据与视图分离的问题，并提供了一种简单、语义化的方式来在页面元素中嵌入自定义数据。通过 dataset 属性，JavaScript 能够以对象的方式轻松地访问和操作这些数据，从而增强了页面的交互性和动态性。
