HTML中id属性必须全局唯一，重复会导致JavaScript获取元素错误、表单验证错位、屏幕阅读器关联失效、SVG资源被覆盖；应改用data-*属性配合querySelectorAll定位。
HTML 中的 id 属性一旦重复，JavaScript、可访问性、表单验证和 SVG 渲染都会出问题——不是报错，而是静默失效。浏览器只认第一个，后续同名元素等于“不存在”。
document.getElementById() 总是返回第一个，其余不可见
这是最直接的表现：调用 document.getElementById('submit-btn') 永远只拿到 DOM 中最先出现的那个元素，不管页面里有多少个 id="submit-btn"。事件绑定、值读取、样式控制全会错位。
- 常见现象：点击第二个按钮没反应；
input.value总是空字符串；表单验证提示和焦点不匹配 - 别指望它报错——它不会抛异常，只会默默返回错误元素，调试时极难察觉
- 如果必须用 ID 查询，确保整个文档中只存在一个匹配项；否则立刻换方案
label[for] 和屏幕阅读器彻底失联
当 label 的 for 属性指向一个重复 id 时，屏幕阅读器只能关联到第一个 input。用户听到“邮箱地址”，焦点却落在完全无关的隐藏输入框上。
- Lighthouse 会明确报出 “Duplicate ID” 并标记为可访问性（A11y）严重问题
- 即使视觉上一切正常，残障用户已无法完成表单操作
- 修复必须同步更新
label[for]和对应input[id]，二者必须一一配对
SVG 内部资源（如 pattern、gradient）被覆盖
SVG 中的 <defs> 子元素（<pattern id="bg">、<linearGradient id="grad">）也受全局 ID 唯一性约束。多个 SVG 块共用相同 ID，浏览器只加载第一个定义，其余全部失效。
立即学习“前端免费学习笔记（深入）”；
- 典型症状：第二个 SVG 显示第一个 SVG 的渐变或图案，而非自身定义的样式
- 不能靠 CSS 覆盖——这是 DOM 解析阶段的 ID 冲突，CSS 完全无能为力
- 推荐做法：为每个 SVG 的资源加语义化后缀，如
id="bg-product-card"、id="bg-user-avatar"，并同步更新fill="url(#bg-product-card)"
用 data-* + querySelectorAll 替代 getElementById 批量操作
当模板复用、循环渲染或响应式多实例不可避免时，硬保 ID 唯一成本高且易出错。更健壮的做法是放弃依赖 id 查找，改用 data- 属性定位上下文。
- 把业务标识放
data-id或data-row-id，例如：<input data-row-id="456" class="price-input"> - 批量读值：
document.querySelectorAll('.price-input')或精准定位：document.querySelector('[data-row-id="456"] .price-input') - 避免用
Math.random()或Date.now()生成 ID——不语义、不可追溯、无法调试 -
querySelectorAll性能无压力，几十个元素下与getElementById几乎无差异
真正麻烦的不是改代码，而是那些藏在模板 include、Vue v-for、Blade @foreach 或 Mailchimp 嵌入脚本里的隐式重复——它们不会报错，但会让 label 关联、ARIA 控制、动态验证全部悄悄失效。
