HTML5 中的 `data-*` 属性有什么作用？如何在 JavaScript 中访问它们？

考察点：前后端数据交互、DOM 操作、解耦

---

data-* 属性允许我们在 HTML 元素上存储额外的私有数据，这些数据对页面布局没有影响，但可以通过 JavaScript 轻松访问。

作用： 它将数据存储在 DOM 中，实现了 HTML 结构和 JS 逻辑的解耦。比如，一个按钮可能需要知道它对应的 ID，我们可以写 <button data-id="123">Delete</button>，而不是把这个 ID 硬编码在 JS 变量里或藏在 class 名中。

JS 访问方式：

1. dataset API（推荐）：

   Code

   const btn = document.querySelector('button');
   console.log(btn.dataset.id); // "123"
   // 如果属性是 data-user-name，访问方式是 btn.dataset.userName (驼峰命名)

2. getAttribute：

   Code

   btn.getAttribute('data-id');

注意：dataset 是实时同步的，修改 btn.dataset.id = '456' 会直接反映在 DOM 属性上。但要注意，不要滥用 data-* 存储大量复杂数据，那样会导致内存浪费，复杂数据应存储在 JS 对象或 State 管理中。