data-*属性必须全小写加连字符命名，数字开头需用方括号访问；e.target.dataset.id常为undefined因事件目标非父容器，应使用closest()查找；dataset会自动处理字符串，复杂值或需原始内容时应使用getattribute()/setattribute()。
data-* 属性名写对了还是读不到？检查命名是否全小写+连字符
浏览器只识别严格符合 data-xxx-yyy 格式的属性，任何偏差都会被直接忽略——data-userId、data_user_id、data-UserID 全部无效，DevTools 里都看不到，dataset.userId 当然返回 undefined。
常见错误现象：<div data-item-2-id="100"></div> 中，element.dataset.item2Id 是 undefined，因为浏览器不支持数字开头的驼峰转换；data-foo--bar 虽能转成 fooBar，但语义模糊且不可靠。
实操建议：
- 命名只用小写字母 + 连字符，如
data-api-key、data-order-status - 含数字开头的（如
data-2024-id），必须用方括号访问：element.dataset["2024Id"] - 避免连续连字符、下划线、点号、大写字母——这些在解析阶段就被丢弃，不是“读不到”，是“根本没进 DOM”
为什么 e.target.dataset.id 总是 undefined？事件目标不是你想象的那个元素
点击图标或文字时，e.target 指向的是最内层被点击的节点（比如 <i></i> 或 <span></span>），而 data-id 往往挂在它的父容器上。直接读 e.target.dataset.id 必然失败。
实操建议：
- 用
e.target.closest('.control')向上查找带data-id的祖先元素，而不是硬绑在e.target - 事件委托绑定到公共父容器（如
.controls），别绑在body或模糊选择器上 - 加个守卫判断：
if (!control || !control.dataset.id) return，避免后续逻辑崩掉
该用 dataset 还是 getAttribute？看你要不要原始字符串
dataset 是方便，但会自动 trim 空格、丢掉大小写、跳过非法命名、把 "true" 当字符串返回——它不是类型转换器，只是个带驼峰映射的只读代理。
实操建议：
- 只要值里有空格、换行、JSON 字符串、或你想确保和 HTML 源码完全一致，一律用
element.getAttribute('data-config') -
dataset仅适合简单场景：data-role="menu"、data-index="3"这类纯小写+连字符+无特殊字符的值 - IE11 不支持
dataset，要兼容旧环境，getAttribute是唯一稳妥选项 - 修改属性必须用
setAttribute('data-xxx', 'value')，dataset.xxx = 'value'不会更新真实 DOM 属性
jQuery 的 data() 和 attr('data-xxx') 别混用
$el.data('id') 和 $el.attr('data-id') 完全是两套机制：data() 是 jQuery 内部缓存，会自动类型转换（"123" → 123，"true" → true），且修改后不会同步回 DOM；attr() 就是原样读写 HTML 属性。
常见错误现象：服务端渲染了 <div data-count="0"></div>，你调 $el.data('count', 1)，再查 $el.attr('data-count') 还是 "0"——两边早已脱钩。
实操建议：
- 只读取原始 HTML 值（比如 SSR 输出的配置），用
attr('data-xxx') - 存组件内部运行时状态（比如计数器、开关），可用
data()，但别指望它反映 DOM - 绝对不要用
data()存 JSON 字符串并依赖 jQuery 自动解析——行为不稳定，失败时返回原字符串，极易引发隐性 bug
复杂点在于：data 属性不是“多加个字段就行”的快捷方案，它是浏览器原生解析链中的一环，命名错、访问错、混用 API，都会导致数据在 DOM、JS、框架之间断开。最稳的底线是——写对命名，读用 getAttribute，改用 setAttribute，其他都是可选优化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
