document.getElementById 快是因为浏览器对ID做了哈希索引，查找为O(1)，但前提是ID必须唯一；一旦重复，它只返回第一个元素，导致事件绑定、无障碍访问、锚点跳转等静默失效，应改用class或data-*属性配合querySelectorAll等健壮方案。
document.getElementById 为什么快，但不能乱用
因为浏览器对 id 做了哈希索引，document.getElementById('foo') 是 O(1) 查找，而 document.getElementsByName('foo') 或 document.querySelectorAll('[id="foo"]') 都得遍历 DOM，O(n)。但这只在 id 真唯一时成立——一旦页面里有两个 id="submit-btn"，getElementById 就永远只返回第一个，后面那个彻底“隐身”。你测性能再快也没用，逻辑已经错了。
重复 id 的真实后果不是报错，而是静默失效
浏览器不会中断渲染，控制台却会打警告：Found 2 elements with non-unique id #save-account-details-nonce。这种警告容易被忽略，但后果是：
- JavaScript 绑定事件时，只有第一个按钮能触发
click监听器 - CSS 的
#save-account-details-nonce { display: none }可能生效，也可能只作用于第一个（不同浏览器行为不一致） - 屏幕阅读器会把多个同名
id当作一个控件，跳过其余几个，直接破坏可访问性 - URL 片段如
page.html#header永远只滚动到第一个id="header"，不管你想锚定的是第几个
动态生成场景下怎么防 id 冲突
常见于循环渲染表单、卡片列表或 WordPress 的 wp_nonce_field 多次调用。别拼接字符串硬写 id="nonce-<?php echo $i ?>"，更别复用固定值。正确做法：
- 用语义化结构替代：把每个表单区域包进
<section>，用querySelector定位内部元素，而非依赖全局id - 真要生成唯一
id，优先用crypto.randomUUID()（现代浏览器）或带前缀的计数器，比如id="account-save-nonce-1"、id="address-save-nonce-2" - 服务端模板里，避免在循环体中无条件输出
<input id="hidden-field">；改用class="js-hidden-nonce"+data-form-scope="account"这类组合定位
class 和 data-* 才是复杂 DOM 的主力定位方式
id 不该是“找元素”的默认选项，尤其当结构可复用、可嵌套时。例如 100 个商品卡片，每个都有“加入购物车”按钮：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：给每个按钮设
id="add-to-cart-1"、id="add-to-cart-2"… 然后写 100 行 JS 绑定 - ✅ 正确：统一用
class="js-add-to-cart"，再靠data-product-id="123"存数据，事件委托一次搞定 - ⚠️ 注意：
data-属性不参与样式或锚点，纯属 JS 数据载体；它没有唯一性约束，也不触发浏览器索引，但正因如此，它比滥用id更安全、更 scalable
真正难的不是生成唯一字符串，而是意识到：DOM 节点本身不需要身份证，业务上下文才需要。别让 id 承担它不该扛的职责。
