getElementById 更快、更专一、作用域受限、容忍非法ID、返回动态集合；querySelector更灵活、支持局部查找、严格遵循CSS语法、返回静态NodeList。
按 ID 找元素时，getElementById 和 querySelector 看似都能用，但底层逻辑、适用边界和实际表现差异明显。掌握这五点，能帮你写得更准、跑得更快、改得更稳。
ID 选择 vs 选择器引擎
getElementById 只认 ID 字符串，不解析任何语法，浏览器直接查内部 ID 索引表；querySelector 则必须走完整 CSS 选择器解析流程——哪怕你只传 "#myId"，它也得识别井号、校验语法、调用样式匹配引擎。这是性能差距的根源，不是“差不多快”，而是“一个查哈希，一个跑编译”。
- getElementById("header") → 直接命中，O(1)
- querySelector("#header") → 解析字符串 → 匹配规则 → 返回首个结果
作用域限制不同
getElementById 只能在 document 上调用，不能在任意 DOM 节点上使用；querySelector 则支持从任意元素出发调用，实现局部查找。
-
document.getElementById("btn")✅ 合法 -
divEl.getElementById("btn")❌ 报错：方法不存在 -
divEl.querySelector(".icon")✅ 合法，只在 divEl 内部搜索
对非法 ID 的容忍度不同
ID 以纯数字开头（如 id="123"）不符合 HTML 规范，但 getElementById 仍可正常获取；querySelector 会因 CSS 选择器语法限制而失败——querySelector("#123") 无效，必须改用属性选择器 querySelector('[id="123"]')。
- HTML：
<div id="123">test</div> -
document.getElementById("123")→ 返回该 div ✅ -
document.querySelector("#123")→ 返回 null ❌ -
document.querySelector('[id="123"]')→ 返回该 div ✅
返回集合的动态性差异
虽然两者都只返回单个元素，但它们衍生出的批量方法行为截然不同：getElementBy 系列（如 getElementsByClassName）返回的是动态集合，而 querySelectorAll 返回的是静态 NodeList。
- 动态集合：DOM 新增匹配元素后，原集合长度和内容自动更新
- 静态 NodeList：快照式结果，后续 DOM 变更不影响已获取的列表
- 这意味着用
getElementsByClassName写循环时可能陷入死循环，而querySelectorAll更安全可控
