querySelector 返回 null 的常见原因包括选择器错误、执行时机过早、大小写或空格敏感、伪类误用；必须进行空值判断，不可直接链式调用。
querySelector 返回 null 的常见原因
调用 document.querySelector() 后得到 null，基本是因为选择器没匹配到任何元素。这不是报错，而是设计行为——它只承诺“找第一个”，找不到就安静地返回 null。
容易踩的坑包括：
- 选择器写错：比如把类名写成
.btn-primary却漏了点，实际写了btn-primary - 执行时机太早：脚本放在
里，DOM 还没加载完，得确保在DOMContentLoaded后执行，或把 script 放在 body 底部 - 大小写/空格敏感：ID 为
myHeader，却用了#myheader；或者写div .title（后代）但实际元素是同级 - 伪类误用：比如
:checked只对已勾选的有效，未勾选时查不到
支持哪些选择器语法
querySelector() 支持全部 CSS 选择器语法，但不支持部分扩展伪类（如 :has() 在旧版 Safari 中不可用）。
常用且安全的写法有：
- 标签：
document.querySelector("header") - 类名：
document.querySelector(".modal.is-open")（支持多类组合） - ID：
document.querySelector("#user-form") - 属性选择器：
document.querySelector('button[data-action="submit"]') - 组合与嵌套：
document.querySelector("article > .content p:first-of-type") - 伪类（基础）：
document.querySelector("input:disabled")、document.querySelector("a[href^='https']")
注意：:nth-child(2) 是按父元素下所有子元素排序的，不是按匹配类型；如果想选第二个 li，更稳的是 li:nth-of-type(2)。
和 getElementById / getElementsByClassName 的关键区别
最常被拿来对比的三个 API，行为差异直接影响健壮性：
-
document.getElementById("foo")：只认 ID，速度快，但不支持 CSS 选择器语法；ID 重复时行为未定义（通常返回第一个） -
document.getElementsByClassName("bar")：返回HTMLCollection（动态集合），哪怕只想要一个也得写[0]，且不支持链式筛选 -
document.querySelector(".bar")：返回单个Element或null，支持完整选择器表达能力，语义清晰，推荐优先使用
性能上，现代浏览器对 querySelector 优化得很好，除非高频调用（如动画帧内），否则不必为这点性能放弃可读性。
必须加空值判断，不能直接链式调用
这是最容易出运行时错误的地方：很多人直接写 document.querySelector(".cta").addEventListener(...)，一旦元素不存在，就会报 Cannot read property 'addEventListener' of null。
正确做法永远带检查：
const btn = document.querySelector(".cta");
if (btn) {
btn.addEventListener("click", handler);
}
或者用可选链（ES2020+，需考虑兼容性）：
document.querySelector(".cta")?.addEventListener("click", handler);
别依赖“这个元素肯定存在”——DOM 是动态的，模板变更、条件渲染、A/B 测试都可能让元素消失。空值判断不是防御性编程的负担，是 DOM 操作的基本前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
