JavaScript选取HTML元素应优先用document.getElementById()（最快，需id唯一）、querySelector()（灵活支持CSS选择器，只返首个）、querySelectorAll()（返全部匹配节点，返回静态NodeList）；慎用getElementsByTagName等动态集合方法。
JavaScript 选取 HTML 元素的核心方法就那几个，但选错会导致 undefined、null 报错，或取到错误的节点。关键不是“会写”，而是“知道该用哪个、什么时候用、为什么失败”。
用 document.getElementById() 取单个带 id 的元素
这是最快、最直接的方式，浏览器内部做了优化，性能最好。但前提是目标元素有 id 属性，且全局唯一（重复 id 时只返回第一个）。
常见错误：
- 拼错
id字符串（大小写敏感、多空格、少字符） - 脚本执行时 DOM 还没加载完，导致返回
null - 误以为它能匹配 class 或标签名（它不能）
确保执行时机安全的做法是放在 DOMContentLoaded 事件里，或者把 <script> 放在 </body> 前：
立即学习“Java免费学习笔记（深入）”；
document.getElementById('header')
用 document.querySelector() 按 CSS 选择器取第一个匹配元素
支持所有标准 CSS 选择器：id（#nav）、class（.btn）、标签（div）、属性（[data-id="123"]）、伪类（input:focus）等。适合灵活定位，但性能略低于 getElementById。
容易踩的坑：
- 选择器语法写错，比如漏掉点号（
btn→ 应为.btn） - 用它取多个元素——它只返回第一个，要多个得用
querySelectorAll - 选择器太宽泛（如
div），可能取到意料外的元素
示例：
document.querySelector('.modal.is-open')
用 document.querySelectorAll() 取所有匹配元素
返回的是 NodeList（类数组，不是真正的 Array），不能直接用 map 或 forEach（除非转成数组）。适合批量操作，比如给所有按钮加监听器。
注意点：
-
NodeList是静态快照，DOM 后续变化不影响它已有的内容 - 如果只是想遍历，可用
for...of或展开运算符：[...document.querySelectorAll('button')].forEach(...) - 别和
getElementsByClassName混淆——后者返回的是动态HTMLCollection，性能稍差且接口更老
示例：
document.querySelectorAll('input[type="text"]')
为什么 document.getElementsByTagName() 和 getElementsByClassName() 要慎用
它们返回的是动态集合（HTMLCollection），每次访问 .length 或索引都会重新查询 DOM，性能差；而且不支持复杂选择器（比如不能写 .btn.active）。
现代代码中，除非兼容极老浏览器（IE8-），否则应优先用 querySelector 系列。另外，这些老方法没有 forEach 方法，容易写出 for (let i = 0; i 这种易出错的循环。
真正需要它们的场景极少，比如在 Web Components 中做轻量级模板扫描，或处理大量同类型元素且对性能极度敏感（此时还要配合缓存）。
最常被忽略的一点：选取操作本身不报错，但后续调用 .addEventListener() 或读取 .value 时才发现是 null —— 所以每次用完 querySelector 或 getElementById，先判断是否存在再操作，比事后调试省力得多。
