document.getElementById()返回null或错误元素的根本原因是id重复，浏览器只返回第一个匹配元素；其他主因包括id非法（数字开头、含点号/冒号）、大小写/空格错误、DOM未就绪或动态渲染未完成。
class 和 id 不是“选一个就行”的风格偏好，而是语义、约束和运行时行为完全不同的两类属性；混用或误用会直接导致 JS 获取失败、样式覆盖失控、表单关联失效、锚点跳转错位。
为什么 document.getElementById() 有时返回 null 或错误元素
根本原因只有一个：id 值在页面中重复了。浏览器不校验合法性，document.getElementById("modal") 永远只返回 DOM 中第一个匹配的元素，其余同名 id 彻底不可见。
- 常见诱因包括：Vue/React 组件循环渲染时写死
id="modal"；服务端渲染与客户端 hydrate 阶段生成逻辑不一致；复制 HTML 片段后忘记改id - 验证方式：在控制台执行
document.querySelectorAll('[id="xxx"]')，若长度 > 1，必须立刻修复 -
id值不能以数字开头（如id="1nav"非法），也不能含点号或冒号（id="user.email"在 JS 中需写成getElementById("user\.email")）
什么时候必须用 id 而不是 class
仅在以下场景中，id 是不可替代的硬性要求：
-
<label for="email">必须精确匹配<input id="email">——for属性不认class、name或任何其他属性 - URL 锚点跳转（如
#contact）只查找id，不会匹配class、data-id或name - 需要通过
document.getElementById()精确获取单个控制容器（如弹窗根节点、表单主容器），且该容器在整页唯一 -
aria-labelledby、aria-describedby等 ARIA 属性值也强制依赖id引用
class 才是日常样式的主力，但命名有硬约束
class 可复用、可叠加、可批量操作，是现代 CSS 开发的事实标准，但随意命名会迅速反噬：
立即学习“前端免费学习笔记（深入）”；
- 禁止用纯样式名：如
class="red-text"或class="float-left"—— 设计变更后，类名语义失效，CSS 里得全局搜替换，还容易漏掉嵌套结构 - 推荐语义化命名：
error-message、search-submit、nav-main，表达“它是什么”，而非“它长什么样” - 多个
class用空格分隔：class="btn btn-primary is-loading"，比写一堆 ID 更灵活、更易维护 - 工具类统一加
u-前缀：u-hidden、u-text-center，避免和业务类名冲突
CSS 选择器权重与 BEM 规范的现实影响
#header 的特异性是 100，.header 是 10 —— 这不是理论值，是真实覆盖失效的根源：
- BEM 明确禁止在 CSS 中使用 ID 选择器，因为一旦某处写了
#modal { z-index: 9999; }，所有基于.modal的组件级样式都可能被意外压垮 - 现代框架（React/Vue）组件化开发中，
id很难保证跨实例唯一，而class天然支持作用域隔离（如 CSS Modules、data-v-xxx） - 用
class实现高优先级需求：写.header.is-sticky替代#header.sticky，既保持语义，又可控可组合
最容易被忽略的一点：HTML 规范只要求 id 全局唯一，但不禁止你写十个 id="temp" —— 浏览器照常渲染，JS 却已悄然失效。这种“看起来正常”的错误，往往要等上线后用户反馈锚点跳错、表单无法聚焦才暴露。
