document.querySelector返回匹配CSS选择器的第一个元素，未找到则返回null；支持各类CSS选择器，可在指定元素内查找；仅返回单个元素，与返回NodeList的querySelectorAll不同。

document.querySelector 是 JS 中最常用的选择器方法之一，它会返回文档中**匹配指定 CSS 选择器的第一个元素**（从上到下查找，遇到第一个就停止），没找到则返回 null。

基本用法

语法很简单：

document.querySelector('CSS选择器')

支持所有标准 CSS 选择器，比如：

arcgis-js

提供 ArcGIS Maps SDK for JavaScript 开发辅助，涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。

下载

• document.querySelector('.btn') —— 类名为 btn 的第一个元素
• document.querySelector('#header') —— ID 为 header 的元素（ID 唯一，通常就一个）
• document.querySelector('div p') —— 最外层 div 内的第一个 p 元素（后代选择器）
• document.querySelector('button[data-action="submit"]') —— 带特定属性的 button
• document.querySelector('input[type="email"]:required') —— 同时满足多个伪类和属性的输入框

注意作用域和上下文

它默认在 document 全局查找，但你也可以在某个元素内部查找：

const container = document.querySelector('#list');
const firstItem = container.querySelector('li');

这时 firstItem 是 #list 内部第一个 li，不是整个页面的。

常见误区提醒

• 它只返回一个元素，即使有多个匹配项也只取第一个；要选全部请用 document.querySelectorAll()（返回 NodeList）
• 选择器字符串必须符合 CSS 语法，写错（如漏引号、拼错类名）会导致返回 null，建议使用前加空值判断：
  const el = document.querySelector('.my-class');
  if (el) { el.style.color = 'red'; }
• 动态插入的元素，需确保执行 querySelector 时 DOM 已就绪（比如放在 DOMContentLoaded 事件里或脚本放在

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！