data属性是HTML标准，dataset是JavaScript API；data-属性由浏览器原生识别但不渲染，dataset是DOM元素上只读的映射对象，自动将连字符转驼峰（如data-user-name→userName），且键名全小写；访问需严格按驼峰规则，否则undefined；动态名或特殊字符应使用getAttribute更安全可靠。
data属性是HTML标准，dataset是JavaScript API
HTML里的 data- 属性（比如 data-id="123"、data-user-name="alice"）是W3C规范支持的自定义属性，浏览器原生识别但不参与渲染；而 dataset 是DOM元素上的只读属性，是JS为方便读写这些 data- 属性提供的映射对象。
关键区别在于命名转换规则：带连字符的 data-user-name 会被自动转成驼峰式 userName（首字母小写，连字符后字母大写），且所有键名自动转为小写——data-USER-ID 和 data-user-id 都映射为 userId。
用 dataset 读取时注意大小写和连字符转换
直接访问 element.dataset.xxx 最方便，但必须按驼峰规则拼写，否则返回 undefined：
const el = document.querySelector('[data-user-id="456"]');
console.log(el.dataset.userId); // "456" ✅
console.log(el.dataset.userid); // undefined ❌（没驼峰）
console.log(el.dataset["user-id"]); // 报错：SyntaxError（点号访问不支持连字符）
如果属性名动态生成或含特殊字符，改用方括号语法：
立即学习“Java免费学习笔记（深入）”；
-
el.dataset["user-id"]会报错，不能用 - 正确写法是先标准化为驼峰：
el.dataset[camelCase("user-id")]，或改用getAttribute("data-user-id") -
dataset不支持删除属性，删data-属性得用removeAttribute("data-user-id")
getAttribute 比 dataset 更灵活也更安全
当需要精确匹配属性名、处理大小写敏感场景、或读取尚未被浏览器解析的动态插入属性时，getAttribute 是更稳的选择：
-
el.getAttribute("data-user-name")返回原始字符串"alice"，不转换命名 -
el.getAttribute("DATA-USER-NAME")返回null（HTML属性名始终不区分大小写，但写法必须全小写才符合规范） - 服务端渲染或模板引擎注入的
data-属性，若含空格、下划线等非标准字符，dataset会忽略，getAttribute仍可读到原始值 - 性能上无明显差异，但
dataset是实时代理对象，反复读同一字段有微小开销
修改 data 属性必须用 setAttribute，dataset 赋值有陷阱
dataset 支持写入，但仅限合法驼峰键名，且写入后会自动补全 data- 前缀并转为小写连字符格式：
el.dataset.userId = "789";
// 等价于 el.setAttribute("data-user-id", "789") ✅
el.dataset["user-id"] = "789"; // 语法错误，不可行
容易踩的坑：
- 给
dataset写入null或undefined，实际存的是字符串"null"或"undefined" -
dataset.fooBar = ""会设置data-foo-bar=""，但dataset.fooBar读出来是空字符串，不是undefined - 想清空某个
data-属性，必须用removeAttribute("data-xxx")，设dataset.xxx = null没用
dataset 的映射逻辑藏在浏览器内部，一旦属性名不符合 data-[a-z0-9-]* 规则（比如含大写字母、下划线、点号），就根本进不了 dataset 对象——这时候只能靠 getAttribute 和正则手动解析。
