JavaScript如何选取HTML元素？

JavaScript选取HTML元素看似简单，实则暗藏陷阱：选错方法不仅导致undefined或null报错、取到错误节点，更会引发后续操作崩溃；本文直击核心——用document.getElementById()追求极致性能（但需确保ID唯一且DOM已就绪）、用querySelector()灵活定位首个元素（警惕选择器语法和“只返一个”的特性）、用querySelectorAll()安全批量获取（注意其静态NodeList本质），并明确指出getElementsByTagName等动态集合方法在现代开发中应被谨慎替代；真正关键的不是“会不会写”，而是“为什么失败”以及“何时该用哪个”。

JavaScript 选取 HTML 元素的核心方法就那几个，但选错会导致 undefined、null 报错，或取到错误的节点。关键不是“会写”，而是“知道该用哪个、什么时候用、为什么失败”。

用 document.getElementById() 取单个带 id 的元素

这是最快、最直接的方式，浏览器内部做了优化，性能最好。但前提是目标元素有 id 属性，且全局唯一（重复 id 时只返回第一个）。

常见错误：

• 拼错 id 字符串（大小写敏感、多空格、少字符）
• 脚本执行时 DOM 还没加载完，导致返回 null
• 误以为它能匹配 class 或标签名（它不能）

确保执行时机安全的做法是放在 DOMContentLoaded 事件里，或者把