HTML中id属性必须全局唯一，重复会导致document.getElementById只返回首个元素，引发事件绑定错位、焦点丢失、无障碍失效等问题；解决方法包括动态添加前缀、用class或data-*替代、避免模板静态写死ID。
HTML 中的 id 属性不是“随便起个名字”，而是必须全局唯一、命名合规、用途明确的定位锚点；用错会直接导致 JS 找不到元素、CSS 样式错乱、表单关联失效，甚至影响屏幕阅读器行为。
为什么 document.getElementById() 有时返回 null 或错误元素？
这不是浏览器 bug，而是 id 重复或未加载就调用的典型后果：
- 页面中存在多个
id="submit-btn"——document.getElementById('submit-btn')永远只返回第一个，其余被忽略 -
<script></script>放在里且没加defer或DOMContentLoaded监听 —— DOM 还没解析完，getElementById必然返回null - 服务端渲染（SSR）和客户端 hydration 生成的
id不一致（比如服务端是id="item-1"，客户端算成id="item-2"）—— React/Vue 会警告，a11y 属性可能断连
哪些字符能用在 id 值里？哪些绝对不能？
HTML5 允许的字符比你想的宽泛，但工程实践中必须收敛：
- ✅ 安全组合：小写字母 + 数字 + 连字符，如
search-input、user-profile-modal - ❌ 禁止开头：数字（
1st-section）、空格（main section）、#（item#2）、点（user.name）、冒号（btn:submit） - ⚠️ 表面合法但高危：
user_name（下划线兼容性好，但连字符更通用）、UserProfile（驼峰易误读，且大小写敏感） - ? 绝对别碰：
for、class、const等 JS 保留字作id，某些构建工具或 polyfill 会意外解析失败
模板循环或组件多次渲染时，怎么避免 id 冲突？
静态写死 id="delete-btn" 是最常见也最危险的写法，尤其在 v-for、{items.map()} 或 SSR 场景下：
立即学习“前端免费学习笔记（深入）”；
- 服务端模板：用动态变量拼接，如
id="item-{{ item.id }}"或id="card-" - React/Vue 组件：通过 prop 注入唯一前缀，例如
:id="`${prefix}-delete-btn`"，父组件传prefix="user-123" - 纯 JS 动态插入：用
crypto.randomUUID()（现代环境）或Date.now() + Math.random().toString(36).substr(2, 9)生成临时唯一值，但需确保不与 SSR 预置 id 冲突 - 更稳妥替代：不用
id做功能绑定，改用data-action="delete"或class="js-delete-btn"，再用document.querySelector("[data-action='delete']")
什么场景真正需要 id？什么场景该换别的方案？
id 的语义是「整个文档里就这一个」，不是「我要绑个事件」的快捷方式：
- ✅ 必须用
id的场景：<label for="email-input"></label>关联表单控件、URL 锚点跳转（#section-2）、ARIA 属性（aria-labelledby="title-id"）、无障碍焦点管理 - ❌ 过度使用
id的典型：id="header"（页面可能有多个 header 区域）、id="card-item"（列表项复用）、id="btn-primary"（按钮类型可复用，该用class） - ? 替代建议：纯 JS 控制逻辑优先用
data-属性；样式复用坚决用class；需要语义化分组可用role+aria-*而非堆砌id
真正难的不是生成一个“看起来唯一”的字符串，而是在 SSR/hydration、多框架嵌套、第三方脚本共存的复杂链路中，让每个 id 在任意时刻都满足「全局唯一 + 命名合规 + 语义准确」这三个条件。漏掉任意一条，问题往往延迟暴露，排查成本陡增。
