HTML中ID必须唯一，重复ID导致getElementById仅返回首个元素；应改用class或data-*属性并配合querySelectorAll，或用[id="xxx"]选择器兜底，动态生成时需拼接唯一ID。
HTML 规范明确要求 id 属性必须唯一，一旦页面中出现多个相同 ID，getElementById 的行为就不可靠——浏览器只会返回第一个匹配元素（或在某些旧环境抛异常），这不是 bug，而是规范使然。要真正解决问题，不能绕开“ID 唯一性”这个前提。
立即修复 HTML 结构：把重复 ID 改成 class 或 data-* 属性
这是根本解法。比如你有多个按钮都写成了 <button id="submit">，应统一改为：
-
<button class="submit-btn">（推荐，语义清晰，可批量操作） - 或
<button data-action="submit">（适合携带逻辑标识）
改完后用 document.querySelectorAll('.submit-btn') 或 document.querySelectorAll('[data-action="submit"]') 获取全部目标元素，再遍历处理。
如果无法修改 HTML（如第三方代码、模板受限），用 querySelectorAll + 属性选择器兜底
即使不能改 ID，也能避开 getElementById 的限制：
- 用
document.querySelectorAll('[id="myId"]')强制获取所有同名 ID 元素（注意：方括号是属性选择器语法） - 它不依赖 ID 唯一性校验，纯按属性值匹配，返回 NodeList，可遍历操作
- ⚠️ 注意：此方法性能略低于原生
getElementById，但对几十个元素完全无感
动态生成时预防重复 ID：用计数器或唯一标识拼接
如果是 JS 动态插入 DOM（如循环创建卡片），避免硬编码相同 ID：
- 错误写法：
el.id = 'item';（每次覆盖） - 正确写法：
el.id = 'item-' + index;或el.id = 'item-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9); - 更推荐：直接用
class或data-id存业务标识，ID 仅用于锚点或 ARIA 关联等必要场景
不复杂但容易忽略：ID 重复看似“能跑”，实则埋下兼容性、可访问性（ARIA）、CSS 选择器、JS 逻辑的多重隐患。从源头保证唯一性，比事后补救更省力。
