data属性必须用小写data-前缀，连字符自动转驼峰；dataset读写简洁但只映射data-属性，不可直接赋值对象；禁用JSON/HTML字符串及未转义用户输入，以防XSS与解析错误。
data属性必须用data-前缀，且不能包含大写字母
浏览器会自动把带大写字母的data-属性转成小写，比如data-UserId会被解析为data-userid，导致JS里用element.dataset.userId取不到值。规范写法只允许小写字母、数字、连字符（-），连字符会自动转为驼峰命名。
常见错误现象：dataset.user_id或dataset.UserID都无效，正确是dataset.userId对应data-user-id，dataset.userid对应data-userid。
-
data-user-id="123"→element.dataset.userId === "123" -
data-api-url="https://api.example.com"→element.dataset.apiUrl === "https://api.example.com" -
data-count="5"→element.dataset.count始终是字符串，需手动parseInt()或Number()
用dataset读写比getAttribute/setAttribute更简洁但有局限
dataset是只读对象，不能直接赋值整个对象；它只映射以data-开头的属性，不包括class、id等原生属性。适合快速存取简单键值，不适合动态批量设置。
使用场景：按钮点击时携带ID、列表项绑定状态标识、表单字段关联校验规则。
立即学习“前端免费学习笔记（深入）”；
- 读取：
btn.dataset.itemId比btn.getAttribute('data-item-id')少打6个字符 - 写入：
btn.dataset.active = 'true'会自动创建data-active="true"属性 - 删除：
delete btn.dataset.active等价于btn.removeAttribute('data-active') - 注意：
dataset不会响应式更新DOM视图，但属性本身会实时写入
避免在data-里塞JSON字符串或HTML片段
虽然语法上允许data-config='{"mode":"dark"}'，但容易引发引号嵌套、转义混乱和XSS风险。浏览器不会自动解析JSON，必须手动JSON.parse()，出错就中断逻辑。
性能影响：每次读取都要重复JSON.parse()，比纯字符串多执行开销；若内容较大（如坐标数组），还可能拖慢渲染。
- 推荐做法：拆成多个原子化
data-属性，如data-theme="dark"、data-mode="auto" - 必须传结构化数据时，优先用
script type="application/json"内联，再用ID关联 - 绝对不要写
data-html="<b>hello</b>"——dataset只作字符串存储，不参与渲染
服务端渲染时data属性要防XSS，尤其来自用户输入
后端模板（如Django、EJS）拼接data-值时，若未转义，攻击者可注入" onmouseover="alert(1)破坏属性结构，甚至触发事件。
关键点：所有动态插入data-的值，必须经过HTML属性上下文转义（不是HTML内容转义），即把"→"、&→&、→<code><。
- Node.js模板中用
escapeHtmlAttr(value)，而非escapeHtml(value) - React/Vue等框架默认做属性转义，但手写
dangerouslySetInnerHTML或v-html会绕过，务必避开 - 检查控制台警告：Chrome对非法
data-值一般不报错，但属性名含空格或特殊符号时，dataset会静默忽略
data-count="0"，取出来也是"0"，不是0。 
