<p>data-* 属性必须以 data- 开头且后跟至少一个字符，HTML 中用短横线分隔（如 data-product-id），JS 中通过 dataset 自动转为驼峰（productID→productIddata-api-url→apiUrl），值恒为字符串，敏感或结构化数据应避免使用。</p>
data-* 属性必须以 data- 开头且后跟至少一个字符
HTML 的 data- 属性是标准方式，用于在 DOM 元素上存储自定义数据。浏览器会忽略所有以 data- 开头的属性，但 JavaScript 可通过 dataset API 读取。商品编号这类业务标识符正适合放在这里——它不参与渲染，只供脚本逻辑使用。
合法写法示例：<div data-product-id="1024"> ✅
非法写法：<div data-id="1024"> ❌（缺少第二个字符）
也非法：<div data-productid="1024"> ❌（驼峰写法在 HTML 中不被识别为合法 dataset 键）
- HTML 中用短横线分隔（如
data-product-sku），JS 中自动转为驼峰（element.dataset.productSku） - 避免使用纯数字键名，如
data-123是无效的 HTML 属性名 - 值始终是字符串，即使你写
data-stock="0"，读出来也是"0"，不是数字0
用 dataset 读取时注意大小写与连字符转换规则
直接访问 element.dataset 返回的是 DOMStringMap，它把 HTML 中的短横线命名自动映射为驼峰。这个转换是单向且固定的，不能靠 JS 手动“还原”原始写法。
比如：<button data-order-no="ORD-2024-789">
在 JS 中必须写成：btn.dataset.orderNo → 得到 "ORD-2024-789"
-
data-user-id→dataset.userId -
data-api-url→dataset.apiUrl -
data-xml-config→dataset.xmlConfig（注意：XML 不会变成xMlConfig，首字母大写仅发生在连字符后的字母） - 如果属性名含数字或多个连续连字符（如
data-v2-flag），dataset.v2Flag仍可读取，但部分旧版 Safari 对数字开头的键支持不稳定
不要把敏感或大量结构化数据塞进 data 属性
data- 属性本质是字符串容器，适合存 ID、状态码、简单标记（如 data-status="in-stock"）。但它不是 JSON 存储区，也不该承载用户手机号、价格明细、库存数组等。
- 嵌套 JSON 字符串（如
data-item='{"id":1024,"name":"iPhone"}'）虽语法合法，但易引发引号冲突、XSS 风险，且无法利用 dataset 类型推断 - 服务端渲染时若动态插入大量 data 属性，会显著增大 HTML 体积，影响首屏解析速度
- 需要频繁更新的数据（如实时库存数），应优先走 API + 状态管理，而非反复操作
dataset - 若真需传结构化信息，建议用
<script type="application/json" id="product-data">方式更安全可控
用 getAttribute() 读取原始字符串值更可靠
当你要读取的 data 属性名含特殊字符（如大写字母、下划线、数字开头）、或不确定是否被 dataset 正确映射时，getAttribute() 是兜底方案。它不作任何转换，原样返回 HTML 中写的值。
立即学习“前端免费学习笔记（深入）”；
例如：<li data-SKU="ABC-XYZ">（大写 SKU）el.dataset.sku → undefined（因为 dataset 只识别小写+短横线格式）el.getAttribute('data-SKU') → "ABC-XYZ" ✅
- 对动态生成的属性名（如拼接出来的
'data-' + key），getAttribute()比dataset[key]更稳定 - 检查是否存在某 data 属性，用
hasAttribute('data-xxx')比查dataset.xxx !== undefined更准确 - 设置值时，
setAttribute('data-xxx', value)总是生效；而dataset.xxx = value在某些老浏览器中可能不触发 DOM 更新（如 IE11）
实际项目里，最常被忽略的是 dataset 的命名转换规则和类型隐式转换——很多人写了 data-productId 却在 JS 里写 dataset.productId，结果读不到，因为 HTML 里必须写成 data-product-id。
