data-*属性不能直接当编号用，但可安全存编号值；读取时需手动类型转换，命名须用kebab-case且禁用数字开头或特殊符号，动态赋值优于硬编码，语义命名（如data-id/data-index）需区分用途。
data-* 属性能直接当编号用吗
不能直接当编号用，但可以安全地存储编号值。浏览器不校验 data-* 的内容类型，所以你可以存数字、字符串甚至 JSON 字符串，但后续读取时得自己处理类型转换——比如 element.dataset.itemIndex 拿到的永远是字符串，哪怕你写的是 data-item-index="123"。
常见错误现象：document.querySelector('[data-id="1"]').dataset.id + 1 得到的是 "11" 而不是 2，因为字符串拼接优先于数值相加。
- 编号建议全用整数字符串（如
data-index="0"），避免空格或前导零 - 属性名用 kebab-case（短横线），JS 中自动转为 camelCase（如
data-list-id→dataset.listId） - 不要用
data-0或data-1这类纯数字属性名，HTML5 不允许属性名以数字开头
怎么批量给列表项加递增编号
手动写 data-index="0"、data-index="1" 容易出错且难维护。更可靠的方式是用 JS 初始化时动态赋值，尤其适合从数组渲染的列表。
示例场景：一个 ，需要按 DOM 顺序编号：
const items = document.querySelectorAll('ul.my-list li');
items.forEach((el, i) => {
el.dataset.index = i; // 自动转成字符串 "0", "1", ...
});
- 如果列表会动态增删，别依赖初始遍历结果，改用事件委托 +
Array.from(items).indexOf(el)实时算位置 - 避免在循环中反复调用
el.setAttribute('data-index', i)，dataset更轻量 - 服务端渲染时已带编号？检查是否重复或跳号，前端逻辑别盲目信任
用 data-number 还是 data-id 做唯一编号
取决于编号用途：data-id 通常对应后端数据库 ID，语义明确、可跨请求复用；data-number 或 data-index 更偏向 UI 层序号（如“第3个选项”），易变、不保证全局唯一。
性能影响很小，但语义混淆会导致后续维护踩坑。比如用 data-id 存临时序号，之后对接 API 时可能误传给后端。
- 用户可见序号（如步骤条、题号）→ 用
data-step、data-question-number等具名属性 - 需与后端交互的标识 → 严格用
data-id，且值必须和 API 返回的id字段一致 - 禁止把敏感信息（如用户手机号）塞进
data-*，它会暴露在 HTML 源码里
dataset 修改后 DOM 里看不到新值？
会看到。修改 el.dataset.xxx 会同步反映在 HTML 属性上，但有延迟：首次设置时属性立即出现；后续修改只更新 dataset 对象，DOM 属性要等下一次重排（reflow）才刷新——多数情况下感知不到，但调试时可能发现 DevTools 里属性没实时变。
更稳妥的读写方式：
- 写入统一用
el.dataset.seq = "42" - 读取时若需确保是最新值，优先用
el.dataset.seq；若需原始字符串（含空格/大小写），用el.getAttribute('data-seq') - 删除用
delete el.dataset.seq或el.removeAttribute('data-seq')，前者更推荐
真正容易被忽略的是：dataset 不支持点号（.）和中括号（[]）命名，data-user.id 和 data-items[0] 是非法属性名，浏览器会静默忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
