getElementById 是最高效直接的 DOM 查询方法，时间复杂度接近 O(1)，要求 ID 以字母开头、全局唯一，返回 null 需判空，不支持作用域查询，优于 querySelector。
getElementById 是 JavaScript 中最高效、最直接的 DOM 查询方法之一，因为它由浏览器原生实现，且浏览器内部通常会为 ID 建立哈希索引，时间复杂度接近 O(1)。只要 ID 唯一、合法，它几乎总是最优选择。
确保 ID 合法且全局唯一
ID 必须符合 HTML 规范：以字母开头，后续可跟字母、数字、连字符（-）、下划线（_）、冒号（:）或点号（.）。但注意：冒号和点号在 CSS 选择器中具有特殊含义，若 ID 包含它们，用 getElementById 仍可正常工作，但用 querySelector 就需转义。
- ✅ 推荐 ID：
user-profile、mainContent、btn_submit - ❌ 避免 ID：
123start（开头非字母）、user:name（虽可用，但易在其他场景出错） - ID 在整个文档中必须唯一；重复 ID 时，
getElementById只返回第一个匹配元素（行为未定义，应避免）
直接调用，无需额外封装或缓存（除非高频重用）
不需要像 querySelector 那样写成 document.querySelector('#myId')，更不用自己封装函数——document.getElementById('myId') 已足够简洁高效。
- ✅ 正确用法：
const el = document.getElementById('header'); - ⚠️ 注意返回值：查不到时返回
null，使用前建议判断：if (el) { ... } - ? 若某个元素在整页生命周期中频繁访问（如按钮点击处理），可将其缓存到变量或模块级常量中，避免反复查询
不支持作用域查询，但可通过父元素间接限定
getElementById 始终在 整个 document 范围内查找，不接受上下文参数（不像 querySelector 可在子元素上调用）。如果需要“在某个区域里找 ID”，说明结构可能不合理——ID 本就该全局唯一。
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
- ? 错误假设：
someDiv.getElementById('item')—— 该方法不存在 - ✅ 替代思路：改用 class +
someDiv.querySelector('.item')，或确保 ID 足够语义化且不冲突（如sidebar-user-avatar） - ? 极少数动态模板场景中 ID 可能重复？应改用
data-id属性配合querySelectorAll+ 过滤
与 querySelector 对比：何时坚持用 getElementById
当明确知道目标有 ID 且只需获取单个元素时，getElementById 比 querySelector('#id') 更快、更语义清晰、兼容性更好（支持所有 IE6+）。
- ✅ 优先用
getElementById：初始化入口、绑定事件的主容器、表单关键字段（如login-form） - ? 可考虑
querySelector：需结合其他条件（如#nav li.active）、ID 含特殊字符且已统一转义、或统一 API 风格 - ? 不要用
querySelectorAll('[id="myId"]')：性能差、语义错、绕远路
它不复杂，但容易被忽略其原生优势。只要 ID 设计合理，getElementById 就是最稳、最快、最值得信赖的选择。
