querySelector 是用 CSS 选择器查找首个匹配元素的方法，支持全局与局部查找、复合选择器及伪类，需注意语法合法性、单元素返回特性、动态元素时机及大小写敏感等问题。
querySelector 是 JavaScript 中最常用、最灵活的 DOM 查找方法之一，它用 CSS 选择器语法，一条语句就能精准定位元素，比 getElementById 或 getElementsByClassName 更简洁有力。
用法很简单：传入一个合法的 CSS 选择器字符串
它会返回匹配到的第一个元素（没找到就返回 null），不需判断长度或取索引：
-
document.querySelector('#header')→ 找 ID 为 header 的元素 -
document.querySelector('.btn-primary')→ 找第一个 class 含 btn-primary 的元素 -
document.querySelector('input[name="email"]')→ 找 name 属性等于 email 的 input -
document.querySelector('article h2:first-child')→ 支持复合和伪类，找 article 下的第一个 h2
查找范围可限定在某个元素内部
不只是从 document 开始，任何 DOM 元素都能调用 querySelector，实现“局部查找”：
const form = document.querySelector('form');const submitBtn = form.querySelector('button[type="submit"]');- 这样避免全局污染，也更高效，特别适合组件化逻辑
注意几个常见坑
容易出错的地方，提前避开能省不少调试时间：
立即学习“Java免费学习笔记（深入）”；
- 选择器语法必须合法——比如
.my-class#id是无效的（class 和 id 不能连写），应写成#id.my-class或分开查 - 它只返回一个元素，要找全部请用
querySelectorAll()（返回 NodeList） - 动态插入的元素，如果还没挂载到 DOM，
querySelector查不到——确保执行时机在元素存在之后（比如放在DOMContentLoaded里，或在插入后调用） - 大小写敏感：HTML 标签名和属性名通常小写，
'DIV'可能查不到，统一用小写更稳妥
配合现代写法提升可读性和健壮性
加一点小技巧，让代码更清晰、更少报错：
- 用可选链操作符防报错：
document.querySelector('.price')?.textContent - 结合解构快速提取多个字段：
const { id, className } = document.querySelector('[data-role="main"]') || {}; - 封装常用查询逻辑，比如：
const $ = (sel) => document.querySelector(sel);，后续直接$('#nav')调用（注意别和 jQuery 冲突）
