querySelector 返回匹配的第一个 DOM 元素（无匹配则返回 null），支持各类 CSS 选择器，仅返回首个匹配项，需判空或用可选链，且可在任意元素上调用实现局部查找。
querySelector 是 JavaScript 中最常用、最简洁的获取单个 DOM 元素的方法，它接收一个 CSS 选择器字符串，返回**匹配的第一个元素**（找不到则返回 null）。
基本用法：传入标准 CSS 选择器
你可以像写 CSS 一样写选择器，支持 ID、类名、标签名、属性、伪类等：
-
document.querySelector('#header')—— 获取 ID 为header的元素 -
document.querySelector('.btn-primary')—— 获取第一个 class 包含btn-primary的元素 -
document.querySelector('input[type="email"]')—— 获取第一个 type 为 email 的 input -
document.querySelector('article h2:first-of-type')—— 获取 article 内第一个 h2
注意：只返回第一个匹配项
即使页面中有多个匹配元素，querySelector 只返回第一个，不会报错也不会返回数组。如果需要全部匹配项，应改用 querySelectorAll()（返回 NodeList）。
例如：<div class="item">1</div><div class="item">2</div>，document.querySelector('.item') 只拿到第一个 <div>。
立即学习“Java免费学习笔记（深入）”；
使用前建议检查是否获取成功
因为选择器可能不匹配任何元素，返回 null，直接调用其属性或方法会报错（如 Cannot read property 'textContent' of null）。推荐加一层判断：
const el = document.querySelector('.my-class');<br>if (el) { console.log(el.textContent); }- 或用可选链操作符（ES2020+）：
document.querySelector('.my-class')?.textContent
作用域：可在任意元素上调用
不只是 document 能用，任何 DOM 元素都可以作为“局部根节点”调用：
const container = document.querySelector('#list');<br>const firstItem = container.querySelector('li');—— 在 #list 内找第一个 li- 这比写
document.querySelector('#list li')更清晰，也更安全（避免跨区域误匹配）
