id属性必须全局唯一，因document.getElementById等机制均按“只取第一个”实现，重复会导致JS取值错误、CSS样式不可靠、锚点跳转错位及无障碍功能紊乱。
id 属性必须在整个 HTML 文档中全局唯一——不是“尽量别重复”，而是浏览器所有依赖它的机制都按“只认第一个”来实现，重复即等于失效。
document.getElementById 只返回第一个匹配元素
这个函数名字里就写着 Element（单数），规范和实现都严格限定它只返回 DOM 中最先出现的那个节点，其余同名 id 全被忽略。
常见错误现象：
- 动态渲染列表时写
<div id="item"></div>循环十次，document.getElementById('item')永远只拿到第一个 - 表单里多个
wp_nonce_field都设id="save-account-details-nonce"，JS 验证时取到的永远是页首区域的值 -
<script></script>放在且没加defer，调用时 DOM 还没加载，getElementById返回null
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每次调用后检查返回值：
const el = document.getElementById('submit-btn'); if (!el) console.warn('找不到 #submit-btn'); - 需要操作多个同类项，改用
class或data-id+querySelectorAll - 避免用
id做循环模板标识，那是class或data-*的职责
#section-id 锚点跳转永远停在第一个匹配位置
点击 <a href="#faq"></a> 时，浏览器内部查找逻辑和 getElementById 完全一致：只定位第一个 id="faq" 元素并滚动过去。
使用场景：
- 目录导航链接指向
#usage-example，但页眉、正文、页脚各有一个id="usage-example"→ 用户永远只能跳到页眉 - SPA 页面切换时未清理旧
id，新内容插入后出现重复 → 锚点行为突然错位，且难以复现
参数差异与影响：
- URL 片段（
#后部分）不校验id是否真实存在，也不报错，静默失败是常态 - 服务端渲染（SSR）+ 客户端 hydration 场景下，重复
id可能触发 hydration mismatch 警告 - 屏幕阅读器依赖
id关联<label for="email"></label>或aria-labelledby，重复会导致朗读串行或跳过
什么时候必须用 id，什么时候该换别的方案
id 不是“高级 class”，它的语义是“全页仅此一个”。滥用会抬高 CSS 特异性（#submit-btn 权重 100，压过大多数 .btn 规则），还让 JS 绑定变得脆弱。
✅ 必须用 id 的场景：
- 锚点跳转目标：
<section id="pricing"></section> -
<label for="email-field"></label>关联的控件：<input id="email-field"> - ARIA 关联：
aria-labelledby="title-desc"指向的<span id="title-desc"></span>
❌ 应避免用 id 的场景：
- 按钮类型标识：
id="button-primary"→ 改用class="btn btn--primary" - 列表项标识：
id="card-item"→ 改用data-item-id="123"或生成唯一id="card-123" - 临时 JS 绑定：
id="modal-close"→ 改用data-action="close-modal"
真正容易被忽略的不是“能不能重复”，而是“重复之后什么都不会报错”——浏览器静默选第一个，CSS 可能全生效，锚点照跳，直到某天 JS 逻辑错位、无障碍测试失败、SEO 片段链接被截断，才暴露问题。检查工具（如 axe、Lighthouse）的 “non-unique id” 警告，往往已是线上故障的前兆。
