按 ID 找元素，getElementById 更快更稳；需类名、属性、嵌套结构或伪类时，querySelector 是唯一且高效的选择。性能差异在于底层机制：前者走 O(1) 哈希索引，后者需解析 CSS 选择器并调用样式引擎。
querySelector 怎么快速获取 DOM 元素
它用的是标准 CSS 选择器语法，写法直观，支持多种定位方式：
-
ID 获取：必须加
#，如document.querySelector('#header') -
类名获取：用
.，如document.querySelector('.btn-primary') -
属性匹配：如
document.querySelector('input[data-required="true"]') -
嵌套结构：如
document.querySelector('nav > ul li:first-child a') -
局部查找：可在任意元素上调用，比如
card.querySelector('.price')，只在 card 内部搜索
getElementById 和 querySelector 的核心性能区别
根本差异在于底层机制：
- getElementById 走哈希索引：浏览器内部为所有 ID 维护一张映射表，查找是 O(1) 时间复杂度，不解析字符串、不触发 CSS 引擎
-
querySelector 走选择器引擎：哪怕只传
"#id"，也要解析井号、校验语法、调用样式匹配逻辑，有固定开销 - 实测在 10 万节点 DOM 中连续查 1 万次：
getElementById平均约 8ms，querySelector('#id')约 25ms - 高频操作（如动画帧内、点击回调）中，这种差距会直接影响主线程负载和帧率稳定性
什么时候该用哪个？看实际需求
别强行统一，按场景选：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
明确知道 ID，且稳定存在 → 无条件用
getElementById('xxx')，语义清、速度快、兼容好（IE5+） -
要查 .active、[data-state="loading"]、form > button:disabled 这类组合条件 → 只能用
querySelector，手动组合getElementById+getElementsByClassName反而更慢、更啰嗦 -
ID 以数字开头（如
id="123"） →getElementById('123')可用，但querySelector('#123')会失败，得改用querySelector('[id="123"]')
容易忽略的关键细节
这些细节会影响代码健壮性和维护性：
立即学习“Java免费学习笔记（深入）”；
-
getElementById只能在document上调用；querySelector可在任意 DOM 节点上调用，支持局部作用域 -
querySelector返回静态结果，DOM 后续变化不影响已获取的元素；getElementById每次都返回当前真实节点（虽 ID 唯一，但元素可能已被移除） - 团队项目中若统一用
querySelector系列，有利于测试模拟、AST 分析等工具链支持，但需接受 ID 场景下的轻微性能损耗
