违反id全局唯一性规范会导致document.getelementbyid()仅返回第一个匹配元素，其余同名id不可见；css样式、锚点跳转、aria关联、表单标签、水合渲染及第三方脚本均会失效或错乱。
违反 id 全局唯一性规范，最直接的后果是 document.getElementById() 只返回第一个匹配元素，其余同名 id 完全不可见——这不是“偶尔出错”，而是浏览器按标准强制执行的行为。
document.getElementById() 永远只拿第一个
这个函数名字里就写着“Element”（单数），它的设计前提就是 id 唯一。一旦页面中出现多个 id="submit-btn"，调用 document.getElementById('submit-btn') 的结果永远是 DOM 中第一个该 id 的元素，后续所有同名元素对它“不存在”。
- 无法通过 id 获取第二个、第三个按钮，哪怕它们在结构上完全合法
- 事件绑定、值读取、属性修改等操作全部落在第一个元素上，逻辑必然错乱
- Vue/React 水合（hydration）阶段若服务端和客户端生成的 id 不一致，会触发 mismatch 警告甚至丢弃部分 DOM
CSS #id 选择器行为不一致
CSS 规范没规定重复 id 该怎么处理，所以不同浏览器可能表现不同：#modal 样式有时全生效，有时只作用于第一个，有时在某些版本里干脆被忽略。
- Chrome 和 Firefox 当前大多会对所有重复 id 应用样式，但这属于“未定义行为”，不能依赖
- 旧版 Safari 或 Electron 内嵌浏览器可能只渲染第一个，导致视觉断裂
- 高特异性（high specificity）的
#id会无意中覆盖 class 规则，让样式调试变得不可预测
锚点跳转和 ARIA 关联彻底失效
URL 中的 #section2、<label for="email"></label>、aria-labelledby="title-desc" 这些机制都依赖 id 的精确指向。
- 点击目录链接跳转时，浏览器只会滚动到第一个
id="section2"，用户可能根本看不到目标内容 -
<label for="input-1"></label>若对应多个id="input-1"，屏幕阅读器会随机关联或报错，可访问性（a11y）直接降级 - 表单提交时，
for和id不匹配会导致焦点丢失、输入框无法被语音控制
动态渲染场景下问题被放大
模板循环（如 v-for、{items.map()}）、SSR、组件复用这些现代开发常见模式，会让重复 id 问题从“偶发”变成“必然”。
- 写死
id="delete-btn"在列表项里 → 渲染 20 个相同 id → JS 只能操作第一个 - 服务端生成
id="user-1"，客户端 hydration 时生成id="user-2"→ React 报 warning，DOM 节点被丢弃重绘 - 第三方脚本（如分析 SDK、客服 widget）内部也依赖
getElementById，你的重复 id 可能让它们静默失败
真正危险的不是报错，而是“看起来正常”——直到某个浏览器更新、某段新 JS 加入、某个残障用户反馈无法操作，问题才浮出水面。id 的唯一性不是“最好遵守”的建议，而是 DOM 查找、锚点、无障碍这三根支柱共同依赖的地基。漏掉一个钉子，整面墙都可能松动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
