document.getElementById只返回一个元素，因其设计目标是获取文档中唯一ID对应的单个Element或null；若ID重复，仅返回DOM中第一个匹配节点，其余被忽略，且不报错。
HTML id 属性不是“生成”出来的，它必须由开发者显式、手动赋予，且在整个文档中只能出现一次——不存在浏览器或框架自动保障唯一性的机制。所谓“防冲突”，靠的是人写对，而不是系统兜底。
为什么 document.getElementById 只返回一个元素？
因为它的设计目标就是找“那个唯一的”元素。document.getElementById 返回类型是 Element | null（单数），不是数组或 NodeList。规范和实现都强制只取 DOM 树中第一个匹配的节点，其余同名 id 全被忽略。
- 常见错误现象：Vue/React 渲染列表时写
<div id="item"></div>循环 5 次 →document.getElementById('item')永远只拿到第一个 - SPA 路由切换后未清理旧节点，新插入内容带已有
id→getElementById结果错位，但控制台可能不报错 -
id写在<script>执行前的静态 HTML 中，但 JS 逻辑假设它“一定存在” → 实际返回null，后续操作报Cannot read property 'addEventListener' of null
wp_nonce_field 等服务端函数重复输出 id 怎么办？
WordPress 的 wp_nonce_field 默认参数会固定生成 id="save-account-details-nonce"，多个区域调用就撞车。这不是 bug，是设计如此——它默认不考虑页面内复用场景。
- 必须显式传参覆盖：
wp_nonce_field('save_account_details', 'save-account-details-nonce', true, false)中第四个参数设为false可禁用自动id输出；或第三个参数传false避免 echo，自己用wp_create_nonce+ 手动<input>控制id - 更稳妥做法：改用
data-nonce或name区分，JS 通过querySelector('button[data-action="save-account"] + input[name="_wpnonce"]')定位，绕开id依赖 - 绝对不要靠 JS 动态重写
id（如el.id += '-'+index），容易漏掉关联的label[for]或aria-labelledby
什么情况下真需要动态生成唯一 id？
只有当组件无法预知上下文、又必须暴露可访问锚点或表单控件绑定时，才需生成。但生成逻辑必须可控、可预测，不能靠随机或时间戳拼接。
立即学习“前端免费学习笔记（深入）”；
- 推荐模式：用有意义的前缀 + 业务标识，例如
id="account-form-submit"、id="address-section-edit-btn"，而非id="btn-1624589321234" - 若必须运行时生成，用
crypto.randomUUID()（现代环境）或基于 stable key 的哈希（如 React key + 组件路径），避免用Math.random() - 关键检查点：生成后立刻用
document.getElementById(newId)验证是否已存在；或用document.querySelectorAll(`[id="${newId}"]`).length === 0
最常被忽略的点：即使你没写 JS，重复 id 也会破坏 label for="xxx" 关联、让屏幕阅读器跳过一半表单、导致 CSS #xxx 规则在不同浏览器中表现不一致——这些不是“将来可能出问题”，而是当前已失效。唯一性不是最佳实践，是 HTML 的硬性契约。
