如何用 document.querySelector 结合 CSS 选择器精准定位页面元素

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 名顺序或层级深度，留出容错空间。