ID重复会导致JavaScript失效，因为document.getElementById()只返回第一个同名元素，后续元素无法被查找到，造成事件绑定等操作静默失败。
为什么ID重复会导致JavaScript失效
浏览器只认第一个同名 id，后续所有同名元素在 document.getelementbyid() 中都查不到——不是报错，是静默失败。比如页面里写了两个 id="submit-btn"，document.getelementbyid('submit-btn').addeventlistener() 绑定的永远只是第一个按钮，第二个点不动。
- DOM 查询类方法（
getElementById、label[for]、@#@#@#@#@#@#@#@#@#@0锚点跳转）全部依赖 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)
或者更直白的调试法：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 打开开发者工具 → 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 模板中写
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
