DOM 元素获取方式：getElementById vs querySelector 性能对比
请比较 getElementById、getElementsByClassName、querySelector、querySelectorAll 等 DOM 获取方式的性能和使用差异。
回答
小字辈
获取方式对比：
| 方法 | 返回类型 | 性能 | 动态集合 |
|---|---|---|---|
getElementById | 单个元素/null | ⚡最快 | 否 |
getElementsByClassName | HTMLCollection（实时） | 快 | ✅ 是 |
getElementsByTagName | HTMLCollection（实时） | 快 | ✅ 是 |
querySelector | 单个元素/null | 较慢 | 否 |
querySelectorAll | NodeList（静态快照） | 较慢 | ❌ 静态 |
性能差异原因：
getElementById使用浏览器内置哈希表直接查找，O(1) 复杂度querySelector需要解析 CSS 选择器并遍历 DOM 树，O(n) 复杂度- 实测：
getElementById比querySelector('#id')快约 2-5 倍
使用建议：
- 优先用 ID：
getElementById性能最佳 - 复杂选择器：用
querySelector（灵活但性能稍差） - 需要实时集合：用
getElementsByClassName/getElementsByTagName - 静态快照：用
querySelectorAll（返回固定副本）
注意：HTMLCollection 是实时的（DOM 变化自动反映），NodeList（querySelectorAll）是静态的，已选元素不会随 DOM 变化而更新。