根本原因是id在页面中重复，导致getelementbyid只返回第一个匹配元素；应改用class或data-*属性配合queryselectorall，动态生成时需拼接唯一id，仅锚点和label[for]等少数场景必须用id。
document.getElementById 为什么总拿不到你要的元素
根本原因只有一个：id 值在页面中重复了。浏览器不报错，但 document.getElementById("xxx") 永远只返回 DOM 中第一个匹配的元素，其余同名 id 彻底“不可见”。
常见诱因包括：
- Vue/React 组件循环渲染时写死
id="modal"，导致多个实例共享同一id - 服务端渲染（SSR）与客户端 hydrate 阶段生成逻辑不一致，挂载出两个
id="header" - 复制 HTML 片段后忘记改
id，比如从<div id="nav"> 粘贴出五份却没重命名 <p>验证方式很简单：打开控制台，运行 <code>document.querySelectorAll('[id="xxx"]')，如果返回长度大于 1，立刻修复。label for 和锚点跳转为什么非 id 不行
label的for属性和 URL 锚点（如#section2）是少数几个强制依赖id的场景，class完全无效。这是因为底层机制只认
id：-
<label for="email">邮箱</label><input id="email">：浏览器严格校验for值必须精确匹配某元素的id属性，大小写敏感，且不支持class或其他属性替代 -
<section id="contact">...</section>：点击<a href="#contact"></a>能滚动定位，是因为浏览器锚点解析器只查找id，不会查class、name或data-id
注意：
id值不能以数字开头（id="1item"非法），也不能含点号或冒号（id="user.email"在 JS 中需写成getElementById("user\.email")才能正确获取）。CSS 里 #header 比 .header 更难覆盖
#header的选择器权重是0,1,0,0，而.header是0,0,1,0。这意味着哪怕你写十个连写的 class，也压不过一个#header的声明。实际影响很直接：
- 第三方组件库注入了
#sidebar { width: 240px; }，你想用.sidebar--collapsed缩窄它？不行，除非加!important或用内联样式 - BEM 类名如
card__title可安全嵌套、条件添加、多状态组合；id无法做到——它天生是单点、静态、不可复用的 - 团队协作时，有人写了
#main-nav，后面人想微调导航菜单样式，只能硬覆盖或妥协，没有中间态
这不是理论问题，而是真实发生的维护成本。BEM 规范明确禁止用
id写 CSS，就是为避免这种特异性失控。class 名该写什么，不该写什么
class是语义分组工具，不是样式快照。写成class="blue-border"或class="big-title"看似省事，实则埋雷。真正该关注的是“它是什么”，而不是“它看起来怎样”：
- ✅ 推荐：
class="error-message"、class="search-input"、class="nav-main"—— 表达功能或角色 - ❌ 避免：
class="red-text"、class="float-left"、class="margin-20"—— 这些描述的是样式，设计一改就失效 - 工具类例外：
u-hidden、u-text-center这类带u-前缀的纯行为类可以存在，但必须统一前缀、明确边界
命名必须用 kebab-case（短横线）：
user-profile合法，userProfile（驼峰）易与 JS 变量混淆，user_profile（下划线）在旧 IE 和部分 SSR 工具链中有兼容风险。 -
