data-id不能替代id，因浏览器不保证其唯一性且无性能/语义优势；仅当需JS逻辑标识、避免ID冲突或绑定业务数据时才用，须手动设计稳定值并配合查询逻辑。
data- 属性本身不提供唯一性保证，它只是存储自定义数据的合法机制；真正实现“唯一标识”要靠你手动设计稳定、可复用的 data-id 值，并配合 DOM 查询逻辑使用。
为什么不能直接用 data-id 替代 id 属性
浏览器不校验 data- 属性的唯一性，document.querySelectorAll('[data-id="123"]') 可能匹配多个元素，而 document.getElementById("123") 天然只返回一个。如果你只是想快速选中一个元素，id 仍是性能最高、语义最明确的选择。只有在以下情况才该优先用 data-id：
- 组件被多次复用（如多个相同结构的卡片），
id会冲突 - 元素由 JS 动态生成，且 ID 需随业务数据绑定（如
data-id="task-456"），而非渲染顺序 - 需要同时存多个维度标识（如
data-task-id+data-user-id），避免拼接字符串解析
怎么写才算“稳定可用”的 data-id
值必须静态写死在 HTML 中，或在插入 DOM 前由 JS 显式设置。常见错误是依赖 Math.random() 或时间戳——每次刷新都变，状态就断了。正确做法：
- 用语义化字符串，如
data-id="user-profile-1001"，而不是data-id="1001" - 服务端渲染时，直接注入确定值；前端动态创建时，在
element.appendChild()前设好el.dataset.id = "xxx" - 避免纯数字开头：
data-id="123-item"合法但易出错，推荐data-id="item-123" - 不塞敏感信息：
data-id是公开可见的，别放手机号、token 等
dataset 读取时大小写和连字符怎么处理
dataset 会自动把连字符转为驼峰命名，且全部小写。比如 data-cell-key="A1" → el.dataset.cellKey；data-user-role="admin" → el.dataset.userRole。注意：
立即学习“前端免费学习笔记（深入）”；
- 连字符后紧跟大写字母会被忽略大小写转换逻辑，
data-URL-path→el.dataset.urlpath（不是urlPath） - 全大写缩写会被转成全小写：
data-API-Key→el.dataset.apikey - 如果原始属性名含数字或下划线，
dataset不做特殊处理：data-v2-flag→el.dataset.v2Flag✅，但data-v2_flag→el.dataset.v2_flag❌（下划线不会转驼峰）
什么时候该用 data-id 而不是 id
核心判断标准：这个“标识”是否只服务于 JS 逻辑，且不需要 CSS 样式锚点或 ARIA 关联？如果是，data-id 更安全。典型场景：
- 表格行需记忆展开状态，但页面有多个表格 → 用
data-id="row-order-789"避免 ID 冲突 - 手风琴面板每次加载要恢复上次打开项 →
data-id="faq-7"存 localStorage，比用id="faq-7"更利于 SSR/CSR 一致 - 列表项支持拖拽排序，需跨容器识别同一数据 →
data-item-id="prod-abc"比依赖 DOM 位置可靠得多
真正容易被忽略的是：哪怕用了 data-id，也得自己写逻辑去查、去匹配、去更新 DOM —— localStorage 不会自动同步，dataset 也不会触发重渲染。这一步漏掉，所谓“唯一标识”就只剩一串静态字符串了。
