ID重复会导致JavaScript失效，因为document.getElementById()只返回第一个同名元素，后续元素无法被查找到，造成事件绑定等操作静默失败。
为什么ID重复会导致JavaScript失效
浏览器只认第一个同名 id，后续所有同名元素在 document.getelementbyid() 中都查不到——不是报错，是静默失败。比如页面里写了两个 id="submit-btn"，document.getelementbyid('submit-btn').addeventlistener() 绑定的永远只是第一个按钮，第二个点不动。
- DOM 查询类方法（
getElementById、label[for]、<a href="https://www.php.cn/link/a1a55e9a565e47d9517d1a10fb1ef99d"></a>锚点跳转）全部依赖 ID 唯一性，不唯一 = 行为不可控 - CSS 中
https://www.php.cn/link/a1a55e9a565e47d9517d1a10fb1ef99d选择器仍会匹配所有同名元素，但这是 CSS 的“容错”，不代表语义正确 - 无障碍工具（如屏幕阅读器）靠
id关联label和表单控件，重复 ID 会让关联失效，用户无法获知输入框用途
用什么替代重复ID的场景
需要多个同类元素时，ID 不该出现重复，而是改用 class 或 data-* 属性配合更健壮的查询方式。
- 批量操作按钮：用
class="js-submit-btn"，再用document.querySelectorAll('.js-submit-btn')遍历绑定事件 - 动态生成列表项：给容器设唯一 ID（如
id="user-list"），子项用data-user-id="123"标识，避免为每个子项硬编 ID - 模态框复用：不要给弹窗写死
id="modal"，而是在 JS 创建时动态生成 ID（如modal-${Date.now()}），或统一用 class +aria-modal="true"管理焦点
怎么快速发现页面里的重复ID
手动检查容易漏，用一行控制台命令就能揪出来：
Object.entries([...new Set([...document.querySelectorAll('[id]')].map(el => el.id))].reduce((acc, id) => { acc[id] = (acc[id] || 0) + 1; return acc; }, {})).filter(([_, count]) => count > 1)
或者更直白的调试法：
- 打开开发者工具 → Console → 粘贴
[...document.querySelectorAll('[id]')].map(el => el.id)，看输出数组里有没有重复字符串 - 用 Lighthouse 运行「Accessibility」审计，它会直接报出
Duplicate ID问题并定位元素 - Vue/React 项目中，如果用
v-bind:id或id={xxx}动态生成，要特别注意循环渲染时没加索引或唯一键，导致 ID 拼接结果相同
服务端模板和构建工具里的隐藏坑
ID 唯一性不是只在手写 HTML 时才要操心。模板引擎、组件系统、静态站点生成器都可能悄悄产出重复 ID。
立即学习“前端免费学习笔记（深入）”；
- EJS / Twig 模板中写
<div id="sidebar"> 放在 include 文件里，被多次引用就重复了 <li>Webpack/Vite 构建时若启用 <code>html-webpack-plugin多页配置，且各页模板都写了<main id="app"></main>，产出的多个 HTML 文件各自合法，但合并部署或 iframe 嵌套时就冲突 - Next.js / Nuxt 的
getStaticProps或asyncData返回数据后，在 JSX/Template 中拼 ID 时，若没把页面路径或数据 ID 融进去（比如写成id="product-card"而非id={`product-card-${item.id}`}），SSR 渲染结果必然重复
ID 唯一性不是“写一次就完事”的规范，它贯穿模板、构建、运行时三个环节，任何一处松动，都会让 JS 行为、可访问性和自动化测试变得脆弱。
