document.querySelector返回null最常见的原因是选择器语法非法或DOM未加载完成；需注意转义特殊字符、确保执行时机、区分后代与子代选择器、合理使用属性选择器，并明确其与querySelectorAll在返回值类型上的本质区别。
document.querySelector 能精准定位单个元素，但前提是选择器写对——写错一个空格、少一个点、多一层括号，结果就是 null。
为什么 document.querySelector 返回 null
最常见的原因是选择器语法非法或 DOM 尚未加载完成。
- 选择器字符串里不能套方括号整体包裹，比如
"[div.content > p]"是错的；正确写法是"div.content > p" - ID 或类名含特殊字符（如点、冒号）必须转义，
document.querySelector("#my.id")会失败，得写成document.querySelector("#my\.id") - 脚本执行时 DOM 还没解析完，
querySelector找不到目标；确保代码放在</body>前，或监听DOMContentLoaded事件 - 大小写敏感：HTML 中 class="Nav" 和选择器
".nav"不匹配（除非用[class~="nav" i]）
用后代/子代选择器限定作用域
避免全局污染，也防止误选。父容器越具体，结果越可控。
- 只选
#sidebar里的第一个按钮：document.querySelector("#sidebar button") - 只选直接子元素（不包括孙子）：
document.querySelector("#form > input[type='text']") - 选某个 class 下第 3 个子
li：document.querySelector(".menu > li:nth-child(3)") - 注意：空格是“后代”，
>是“子代”，二者行为差异很大，调试时用浏览器开发者工具的copy selector功能可快速验证
属性选择器 + 伪类组合提升精度
当 class 或 ID 不唯一，或动态生成时，靠属性和状态更稳。
立即学习“前端免费学习笔记（深入）”；
- 选
data-status="pending"且未禁用的按钮：document.querySelector("button[data-status='pending']:not(:disabled)") - 选以
api-开头的自定义属性元素：document.querySelector("[data-id^='api-']") - 选含有特定文本的
span（需配合textContent判断，选择器本身不支持文本内容匹配） - 属性值含空格？用
~="val"替代="val"，例如[class~="btn"]能命中class="btn primary"
querySelector 和 querySelectorAll 的关键区别别搞混
不是“哪个更好”，而是“哪个更合适”——选错会导致后续逻辑崩掉。
-
document.querySelector("input[name='email']")返回一个元素，可直接调用.value或.focus() -
document.querySelectorAll("input[name='email']")返回 NodeList，哪怕只有一个匹配项，也不能直接 .value；必须用[0].value或遍历 - 如果页面中可能有多个同名表单项（比如复用组件），又只打算操作第一个，用
querySelector更安全；若要批量操作，必须用querySelectorAll并处理伪数组特性（比如不能用.map()，得转成真数组或用forEach） - NodeList 是静态的：DOM 变动后不会自动更新，这点常被忽略——比如先查了一组按钮，再动态加了一个，
querySelectorAll结果里不会包含它
真正难的不是写出一个能跑的选择器，而是写出一个在 DOM 结构微调、属性动态变化、浏览器兼容性切换时依然健壮的选择器。多用属性和状态，少依赖 class 名顺序或层级深度，留出容错空间。
