HTML id属性必须全局唯一，违反则导致document.getElementById只返回首个匹配元素、锚点跳转错位、屏幕阅读器关联紊乱等静默失效问题。
HTML id 属性不是“带点高级感的 class”，它是一条硬性契约：全页只能出现一次。违反它，document.getElementById 就会静默失效，锚点跳转就跳错位置，屏幕阅读器就念串行——而且这些故障往往不报错、难复现、晚发现。
为什么 document.getElementById 总只拿到第一个元素？
这不是浏览器“偷懒”，而是规范强制行为。getElementById 的函数名里就写着 Element（单数），W3C 和 WHATWG 规范都明确要求它只返回 DOM 树中第一个匹配的节点。后续同名 id 全被忽略。
- 常见错误现象：
wp_nonce_field('action', 'save-account-details-nonce')在表单里循环三次，结果document.getElementById('save-account-details-nonce')永远取到页首那个，验证逻辑直接绕过后面两个区域 - 使用场景：动态渲染列表（如 React/Vue 的
v-for或map）中写<div id="item">，JS 绑定后所有操作只作用于第一个 - 实操建议：每次调用后加防护检查 ——
const el = document.getElementById('submit-btn'); if (!el) console.warn('找不到 #submit-btn');
哪些地方看似能用 id，其实该换 class 或 data-id？
id 的语义是“全页仅此一个”，不是“这个类型”。把它当分类标签用，等于主动埋雷。
- 按钮样式标识：
id="button-primary"→ 改用class="btn btn--primary"，CSS 特异性可控，复用无压力 - 列表项标识：
<li id="user-123">循环生成 → 改用<li data-id="123">+querySelectorAll('[data-id]')，避免全局冲突 - 模态框开关：
<button id="open-modal">多个弹窗共用 → 改为class="js-open-modal"+data-target="modal-profile"，解耦更清晰
锚点跳转为什么总跳到页眉？
浏览器内部查找 #faq 的逻辑和 getElementById 完全一致：只认第一个 id="faq"。哪怕你写了十个，点击链接也只会滚动到第一个。
立即学习“前端免费学习笔记（深入）”；
- 常见错误现象：SPA 页面切换时未清理旧内容，新插入区块带重复
id，导致目录导航突然全部跳偏 - 参数差异影响：URL 片段（
#后）不校验id是否存在，也不抛错，失败完全静默；服务端渲染（SSR）+ hydration 时还可能触发 mismatch 警告 - 实操建议：用
querySelector替代盲目信任id——document.querySelector('main [id="usage-example"]')可限定范围，降低误匹配风险
最常被忽略的一点：重复 id 不一定立刻崩，但会让问题藏得更深——比如表单验证通过了，只是因为 JS 恰好取到了第一个 nonce；屏幕阅读器把三个 label for="email" 全指向同一个 input，用户根本填不了后两个字段。唯一性不是“可选最佳实践”，它是 DOM 交互的地基。一旦松动，上面所有 JS、CSS、无障碍逻辑都会开始晃。
