HTML中id重复会导致getElementById等API只返回首个元素，label绑定、锚点跳转、无障碍访问全部失效，应改用class或唯一标识符。
HTML 中 id 重复不是“能用就行”的小问题，而是会导致 document.getElementById()、label[for]、锚点跳转、屏幕阅读器关联全部静默失效——你改了 JS 却没效果，八成是卡在这儿。
为什么 document.getElementById 只拿到第一个元素
浏览器解析 DOM 时遇到重复 id，不会报错，但所有依赖唯一性的 API 都只认第一个。比如页面有 3 个 id="submit-btn"，document.getElementById('submit-btn') 永远返回最上面那个，后面两个彻底“隐身”。这不是兼容性问题，是规范强制行为。
-
label[for="xxx"]只会绑定到第一个id="xxx"的表单控件，其余 label 点击无效 - URL 中的
#section1锚点只会滚动到第一个匹配元素 - Lighthouse 的 Accessibility 审计会直接标红 “Duplicate ID”，且定位到具体行
用 class 替代 id 处理批量同类元素
当你要操作一组功能相同的元素（如多个上传区、复选框、商品卡片按钮），id 本就不该出现——这是 class 的典型场景。
- 把
id="photo"改成class="preview-img"，把id="file"改成class="upload-input" - JS 改用
document.querySelectorAll('.preview-img')获取全部，再用forEach或索引访问对应项 - 如果需区分上下文（比如每个上传区要独立预览），把结构包进一个容器：
<div class="upload-group">...</div>，再用el.querySelector('.preview-img')在局部查
动态生成时如何保证 id 唯一
模板循环（PHP/JSX/Vue）最容易产出重复 id，尤其在渲染列表时给每个项硬写 id="item"。
立即学习“前端免费学习笔记（深入）”；
- 服务端模板：在循环中拼接唯一标识，如
id="item-= $comment['id'] ?>"或id="product-{{ index }}" - 前端 JS 动态创建：用
crypto.randomUUID()（现代浏览器）或Date.now() + Math.random()生成临时 ID - SVG 内部资源（
<pattern>、<linearGradient>）也受同一规则约束，必须为每个 SVG 块的defs子元素分配不同id，引用处同步更新url(#pattern-a)
真正难的不是改 ID，是意识到：只要你在写“多个东西都叫同一个名字”，就该立刻停下，问自己——这东西到底需不需要全局唯一？还是它只是“一类东西里的一个”？后者永远优先用 class 或 data- 属性。
