<p>JavaScript 通过 dataset 操作 data-* 自定义属性，自动转换连字符为驼峰命名；读写均为字符串，需手动类型转换；支持增删改，非标准命名需用方括号访问。</p>
JavaScript 中通过 dataset 操作元素的自定义数据，核心是利用 HTML5 的 data-* 属性与 DOM 元素的 dataset 属性联动。它自动将带连字符的属性名转为驼峰命名，读写都直观简洁。
如何设置自定义 data 属性
在 HTML 中添加以 data- 开头的属性，例如：
<div id="user" data-user-id="123" data-full-name="Alice Wang" data-is-active="true"></div>
这些属性会自动映射到 JS 的 dataset 对象上，注意命名转换规则：
立即学习“Java免费学习笔记（深入）”；
-
data-user-id→dataset.userId -
data-full-name→dataset.fullName -
data-is-active→dataset.isActive
用 dataset 读取自定义数据
获取元素后，直接访问 dataset 对应属性即可（返回值始终是字符串）：
const el = document.getElementById('user');
console.log(el.dataset.userId); // "123"
console.log(el.dataset.fullName); // "Alice Wang"
console.log(el.dataset.isActive); // "true"
⚠️ 注意：dataset 不会自动转换类型，"true" 是字符串，不是布尔值，需手动判断或转换。
用 dataset 修改或新增自定义数据
赋值即可更新对应 data-* 属性（会实时反映在 DOM 中）：
el.dataset.userId = "456";
el.dataset.isAdmin = "false"; // 新增 data-is-admin="false"
这会同步更新 HTML：
<div id="user" data-user-id="456" data-full-name="Alice Wang" data-is-active="true" data-is-admin="false"></div>
删除某个 data 属性，用 delete 操作符：
delete el.dataset.fullName; // 移除 data-full-name
注意事项和常见坑
- 属性名必须以
data-开头，否则不会被dataset收录 - 含数字或大写字母的命名（如
data-1st-place）无法通过点语法访问，要用方括号：el.dataset['1stPlace'] - 空格、特殊符号不支持，仅限字母、数字、连字符、下划线
- 修改
dataset会触发 DOM 变更，但不会触发自定义事件，如需响应变化，可监听DOMSubtreeModified（不推荐）或自行封装 setter
