queryselector是浏览器原生方法，接收css选择器字符串并返回文档中第一个匹配的dom元素，若无匹配则返回null；它比getelementbyid更灵活，支持所有css选择器语法。
想获取页面中第一个指定标签，用 querySelector 最直接——它天生只返回匹配的第一个元素，不用写循环、也不用取索引[0]。
querySelector 是什么？和 getElementById 有啥区别？
querySelector 是浏览器原生方法，接收一个 CSS 选择器字符串（比如 "div"、".btn"、"#header"），返回文档中**第一个**匹配该选择器的 DOM 元素。如果没找到，返回 null。
对比 getElementById：后者只能按 id 查找，功能单一；而 querySelector 支持所有 CSS 选择器语法，灵活得多，且同样高效。
怎么写最基础的获取语句？
语法很简单：document.querySelector("选择器")
常见用法示例：
- 获取第一个
<p></p>标签：document.querySelector("p") - 获取第一个 class 为
title的元素：document.querySelector(".title") - 获取第一个 id 为
nav的元素：document.querySelector("#nav") - 获取第一个
<article></article>内的<h2></h2>：document.querySelector("article h2")
容易出错的几个细节
新手常在这里卡住，注意这几点：
- 选择器字符串必须用引号包裹（单引号或双引号都行），漏掉会报语法错误
- 类名前要加点
.，id 前要加井号#，比如".box"✅，"box"❌（那会当成标签名查找） - 标签名不区分大小写，但 class/id 名区分大小写，
"#Header"和"#header"可能不是同一个 - 脚本执行时 DOM 必须已加载，否则可能取到
null。可放在<script></script>标签末尾，或用DOMContentLoaded事件包裹
验证是否成功获取到元素
拿到结果后别急着用，先检查一下：
- 打印看看：
console.log(document.querySelector("p"))—— 如果是元素对象，说明成功；如果是null，说明没找到 - 快速确认类型：
if (el && el.nodeType === 1) { ... }（nodeType === 1表示是元素节点） - 想确保“第一个”符合预期，可在浏览器开发者工具里用
Ctrl+F（Win）或Cmd+F（Mac）搜对应选择器，看高亮的是不是你想要的那个
掌握这四点，零基础也能稳稳拿到页面里第一个指定标签。不复杂，但细节决定成败。
