querySelector返回null的主因是执行时机过早（如script在head中未加defer）或作用域错误（如在Shadow DOM中误用document而非shadowRoot）。
querySelector 返回 null 的常见原因
直接调用 document.querySelector() 却拿到 null，基本不是语法写错，而是时机或作用域问题。最典型的是：脚本在 <body> 内容还没加载完时就执行了——比如把 <script> 放在 <head> 里又没加 defer。DOM 树没构建好，自然找不到元素。
另一个高频坑是选择器写对了，但目标元素不在当前文档上下文里。比如在 Shadow DOM 内部调用 document.querySelector()，它查的是全局 document，不是 shadowRoot。此时得换用 shadowRoot.querySelector()。
- 确保脚本放在
</body>前，或加defer属性 - 若操作自定义组件（如 Web Components），确认调用对象是正确的
shadowRoot或iframe.contentDocument - 用浏览器开发者工具的
Elements面板手动验证选择器是否真能高亮目标元素
支持哪些 CSS 选择器语法
querySelector() 支持绝大部分标准 CSS 选择器，但不支持伪元素（如 ::before）和部分较新的伪类（如 :has() 在旧版 Safari 中不可用）。实际开发中，稳妥组合包括：
- 标签名：
document.querySelector('header') - 类名：
document.querySelector('.btn-primary')（注意点号不能漏） - ID：
document.querySelector('#modal')（ID 值不能带点或井号以外的特殊字符，否则需转义） - 属性选择器：
document.querySelector('[data-id="123"]')、document.querySelector('input[name="email"]') - 组合与后代：
document.querySelector('form .error-message')、document.querySelector('nav > ul > li:first-child')
注意：:nth-child() 等结构伪类依赖真实 DOM 结构，若元素是动态插入的，可能因索引变化导致匹配意外偏移。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
querySelector 与 querySelectorAll 的关键区别
只想要第一个匹配项时，必须用 querySelector()；用 querySelectorAll() 再取 [0] 不仅多一步，还浪费性能——后者会遍历完整 DOM 树找所有匹配项，而前者找到第一个就停止。
-
querySelector()返回单个 Element 或null；querySelectorAll()返回静态 NodeList，即使结果为空也是空 NodeList，不会是null - 当目标元素有多个且你明确只需要首个（例如页面只有一个
<main>），优先选querySelector() - 如果后续要遍历全部匹配项，才用
querySelectorAll()，别为了“统一风格”硬套[0]
兼容性与现代替代方案
querySelector() 在 IE8+ 就已支持，但 IE8 仅支持 CSS2.1 选择器（不支持属性值带引号的写法，如 [data-role=header] 可以，[data-role="header"] 会失败）。如今绝大多数项目已放弃 IE，可放心使用现代语法。
真正值得留意的不是兼容性，而是可维护性：硬编码选择器字符串容易散落在各处，一旦 HTML 结构调整，JS 就失效。更稳健的做法是给关键节点加语义化 data-* 属性，比如 data-js-header，然后统一用 document.querySelector('[data-js-header]') ——这样 HTML 和 JS 的耦合更清晰，也方便搜索定位。
复杂交互场景下，如果频繁查同一类元素，考虑缓存结果或用事件委托代替反复查询。
