getelementbyid是最快最稳的单节点查找方式，因浏览器用哈希表实现o(1)查找，无需解析css、不依赖dom结构、零学习成本、返回明确、避免静默失败，仅受限于id重复、数字开头id兼容性及dom未就绪。
因为它是最快、最稳、最不容易出错的单节点查找方式——不用解析选择器、不依赖DOM结构深度、不拼写敏感（除了大小写），只要ID写对、元素已加载，调用就直接返回目标元素。
它真有那么快？
现代浏览器为所有合法 ID 建立了内部哈希表，getElementById 查找是 O(1) 时间复杂度。这意味着无论页面有 10 个还是 10 万个节点，只要 ID 存在，查找耗时基本不变。而 querySelector('#myId') 即使写的是 ID 选择器，也得走一遍 CSS 解析引擎：拆解字符串、验证语法、匹配规则、检查伪类……多出至少一倍开销。
新手最容易踩的坑，它帮你避开一半
-
不用记选择器语法：不用纠结点号、井号、空格、大于号，写 ID 名字就行，比如
getElementById('header')，零学习成本； -
不会误拿到多个结果：它只返回第一个匹配元素或 null，不会像
getElementsByClassName那样返回 HTMLCollection 让你忘了取[0]； - 错误反馈明确：返回 null 就说明要么 ID 拼错了、要么脚本执行太早、要么元素根本没写 id 属性——线索清晰，好排查；
-
不支持伪类和作用域：看似是缺点，实则是保护。新手不会写出
querySelector('#btn:disabled')却忘了元素还没禁用，导致逻辑静默失败。
什么情况下不能用？
只有三种真实限制，且都容易识别：
- ID 在页面中重复了——浏览器只返回第一个，行为不可靠，但这是 HTML 结构问题，不是方法问题；
- ID 以数字开头（如
id="123box"），旧版 IE 可能不认，建议改用box123这类写法； - 脚本放在
里又没加defer或监听DOMContentLoaded——这时 DOM 还没就绪，自然查不到，把 script 移到前就能解决。
顺便说一句怎么用更省心
不必每次都要 document.getElementById 打一长串。可以封装成简写函数，比如：
const $ = (id) => document.getElementById(id);const header = $('header');if (header) header.style.backgroundColor = '#f0f0f0';
加上存在性判断，既轻量又安全。不复杂但容易忽略。
