动态生成 ID 时服务端与客户端必须保持一致，否则 SSR/Hydration 会因 DOM 不一致报错；禁止用随机值或时间戳，应基于唯一数据拼接；需确保全局唯一（含 iframe）、命名合法（小写字母/数字/连字符），并优先考虑 data-id 或 class 替代 ID。
动态生成 id 时服务端和客户端必须保持一致
SSR（服务端渲染）+ Hydration（客户端激活）场景下，若服务端输出 id="item-123"，而客户端 JS 又生成 id="item-456"，React 会抛出 mismatch 警告，Vue 可能直接丢弃事件绑定或样式状态。
根本原因是 DOM 树结构不一致，框架无法正确“接续”已有的节点。解决办法只有两个：
- 服务端与客户端共用同一套 id 生成逻辑（例如都基于数据的
id字段拼接） - 彻底避免用时间戳、
Math.random()、Date.now()等不可控值做 id 主干
模板循环中写死 id 是最常见错误
比如在 Vue/React 列表渲染或服务端模板（如 Jinja、EJS）中，把 id="delete-btn" 直接写在循环体里，结果生成 10 个相同 id 的按钮——document.getElementById('delete-btn') 永远只返回第一个，点击第 7 个实际触发的是第 1 个的逻辑。
正确做法是拼接唯一上下文：
立即学习“前端免费学习笔记（深入）”；
- Vue：
:id="'delete-btn-' + item.id" - React：
id={`delete-btn-${item.id}`} - EJS：
id="delete-btn-"
注意：如果 item.id 来自用户输入或外部 API，需先校验是否符合命名规范（不能以数字开头、不含空格/点/冒号）。
iframe 也参与全局 id 唯一性校验
主页面和嵌入的 <iframe> 内容共同构成一个“文档集合”，其中所有 id 必须全局唯一。也就是说，主页面有 id="modal"，iframe 里再出现一次 id="modal" 就算违规。
这会导致：
-
document.getElementById('modal')在主页面 JS 中可能返回 iframe 里的元素（取决于 iframe 加载时机和浏览器实现） - 锚点跳转（
#modal）行为不可预测 - ARIA 关联（如
aria-labelledby）失效
解决方案：给 iframe 内容的 id 加统一前缀，例如 id="iframe-a-modal"，并确保主页面不用相同前缀。
别用点、冒号、空格或数字开头的字符串当 id
id="user.email" 或 id="btn:submit" 在 HTML 解析上合法，但几乎必然出问题：
- CSS 中
#user.email被解析为「id=user 且 class=email」，不是你想选的元素 -
document.querySelector('#user.email')返回null；只有document.getElementById('user.email')能取到，但事件委托、样式复用全脱节 -
id="1st-section"在 CSS 中必须写成#\31 st-section，难读难维护
安全命名只用小写字母、数字、连字符：id="user-profile"、id="search-input"。连字符比下划线更通用，也兼容旧版 IE。
真正容易被忽略的是：id 不是“为了 JS 好写”而存在的，它的语义是「这个元素在整个文档里就是它自己」。一旦你发现需要靠 id 区分列表项，说明你该用 data-id 或 class 配合事件委托了——除非你真正在操作一个全页唯一的模态框、表单字段或 ARIA 关联目标。
