queryselector 返回 null 主因是执行时机不当，如 dom 未加载完、元素动态插入前查询、选择器大小写或空格错误、使用无效伪类；性能差异在常规场景可忽略，动态内容需重新查询，伪元素和 shadow dom 内部节点需特定方式访问。
querySelector 返回 null 的常见原因
querySelector 找不到元素，绝大多数时候不是语法写错，而是执行时机不对。DOM 还没加载完就去查，结果必然是 null。
- 页面脚本放在
里，且没加defer或DOMContentLoaded监听 - 元素是后续用 JS 动态插入的，但查询发生在插入前
- 选择器本身有空格或大小写问题，比如把
.MyClass写成.myclass（类名区分大小写） - 使用了伪类如
:hover或:checked，但这些不会出现在初始 DOM 中，querySelector查不到
示例：
document.querySelector('#main').textContent = 'ok'; // 报错：Cannot set property 'textContent' of null
得先确认 #main 确实存在且已挂载。
querySelector 与 getElementById 性能差异真的重要吗
在绝大多数场景下，不重要。现代浏览器对 querySelector 的 #id 和 .className 形式做了专门优化，和 getElementById 的性能差距可以忽略。
- 只有在高频循环（比如每帧调用数百次）中才可能测出微秒级差别
-
getElementById严格限于 ID，而querySelector支持复杂选择器，灵活性高得多 - 如果你写的是
document.querySelector('#user-name')，其实和document.getElementById('user-name')行为一致，但前者更统一、易维护
别为了“理论上快一点”强行拆分写法，尤其在团队协作代码里混用两种风格，反而增加认知负担。
立即学习“Java免费学习笔记（深入）”；
动态内容下 querySelector 失效怎么办
不是 querySelector 失效，是你没重新查。它只查当前 DOM 快照，不监听变化。
- 新增元素后，必须再次调用
querySelector（或querySelectorAll）获取新引用 - 不要缓存旧的
Element对象，指望它自动更新 —— DOM 节点不会“活过来” - 若需持续响应插入，考虑用
MutationObserver，而不是轮询或反复查
示例：
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
document.body.insertAdjacentHTML('beforeend', '<div class="item">new</div>');
const newItem = document.querySelector('.item'); // ❌ 拿到的是第一个，不是刚插的
const freshItem = document.querySelector('.item:last-child'); // ✅ 明确意图
});伪元素、Shadow DOM 和 querySelector 的边界
querySelector 查不到伪元素（::before、::after），因为它们不在 DOM 树中，只是渲染层抽象。
- 也查不到 Shadow DOM 内部的节点，除非你在对应
shadowRoot上调用 - 比如自定义组件
<my-input></my-input>里有个#input，直接document.querySelector('#input')是空的 - 正确做法是：
el.shadowRoot.querySelector('#input')，其中el是那个<my-input></my-input>实例
容易被忽略的一点：有些框架（如 Vue、Lit）默认启用 Shadow DOM 模式，这时候全局查不到组件内部结构，不是 bug，是设计如此。
