querySelector 返回 null 主因是执行时机过早（DOM 未加载完），需确保脚本置于 前或监听 DOMContentLoaded；注意上下文、选择器转义及 XSS 风险。
querySelector 返回 null 是最常见的错误
调用 document.querySelector 后得到 null，不是语法写错了，大概率是执行时机不对——DOM 还没加载完就去查元素。比如脚本放在 里，或没加任何加载保障。
- 确保脚本在
前执行，或包裹在DOMContentLoaded事件里 - 避免在 iframe 或 Shadow DOM 外部直接查其内部元素（需先定位到对应上下文）
- 检查选择器字符串是否含空格、大小写、特殊字符未转义（如 ID 含点号
id="user.name"要写成#user\.name）
querySelector 和 querySelectorAll 的关键区别
querySelector 只返回第一个匹配元素，querySelectorAll 返回 NodeList（类数组，但不是 Array）。这个差异直接影响后续操作方式。
- 要遍历多个结果？必须用
querySelectorAll，再配合forEach或展开运算符：[...document.querySelectorAll('.item')].forEach(...) - 想链式调用
.style或.addEventListener？querySelector返回单个 Element，可直接用；querySelectorAll返回的 NodeList 没有这些方法 -
querySelectorAll返回的是静态 NodeList，不随 DOM 变化自动更新；而getElementsByClassName等返回的是动态 HTMLCollection
用 querySelector 替代 getElementById / getElementsByClassName 是否更优？
不是“更优”，而是“更灵活”，但也带来隐性成本。
- 语义清晰度下降：用
querySelector('#my-id')不如document.getElementById('my-id')直观，且后者性能略高（浏览器对 ID 查询做了专门优化） - 兼容性无差别：现代浏览器都支持，但 IE8+ 就支持
querySelector，和getElementById一样 - 真正适合它的场景是组合条件查询，比如：
document.querySelector('form[method="POST"] input[name="email"]:not([disabled])')—— 这种复合逻辑用传统 API 写起来非常啰嗦
在 React/Vue 等框架中直接用 querySelector 容易出问题
框架控制 DOM 更新节奏，你调用 querySelector 的时机很可能早于组件完成挂载或更新。
立即学习“Java免费学习笔记（深入）”；
- React 中不要在
render函数里查 DOM；改用useRef+useEffect在 DOM 渲染后操作 - Vue 中避免在
data或computed里调用，应在mounted或nextTick回调中使用 - 服务端渲染（SSR）环境下，
document根本不存在，直接报错；务必加if (typeof document !== 'undefined')判断
