queryselector 是 javascript 中支持 css 选择器语法、返回第一个匹配 dom 元素的方法，可从 document 或任意元素内部查询，需检查 null 避免报错，批量匹配应使用 queryselectorall()。

querySelector 是 JavaScript 中最常用、最灵活的 DOM 查询方法之一，它支持 CSS 选择器语法，能精准定位单个匹配的元素（返回第一个匹配项）。

基础用法：传入 CSS 选择器字符串

调用方式简单直接：

• document.querySelector('div') —— 获取文档中第一个 <div> 元素 <li> <code>document.querySelector('#header') —— 获取 id="header" 的元素（注意井号）
• document.querySelector('.nav-item') —— 获取第一个 class 为 nav-item 的元素（注意点号）
• document.querySelector('input[type="email"]') —— 获取第一个 type 为 email 的 input

支持复杂选择器，不局限于单类或单 ID

你可以组合使用后代、子代、属性、伪类等 CSS 语法：


Gradle 9.8.0
下载
• document.querySelector('ul.menu > li:first-child') —— 获取 class 为 menu 的 ul 下的第一个子 li
• document.querySelector('button[data-action="save"]:enabled') —— 获取启用状态、且有 data-action="save" 的按钮
• document.querySelector('article .title + p') —— 获取 article 内紧接在 .title 元素之后的段落

查询范围可限定在某个元素内部

不一定要从 document 开始查，任何已获取的 DOM 元素都能作为查询起点：

• const card = document.querySelector('.card');
• const title = card.querySelector('h2'); —— 在 card 内部找 h2
• const closeBtn = card.querySelector('[data-dismiss="modal"]');

注意返回值和常见陷阱

它只返回第一个匹配元素，没匹配到则返回 null，使用前建议检查：

• 别直接链式调用方法，如 document.querySelector('.btn').addEventListener(...) —— 若元素不存在会报错 “Cannot read property 'addEventListener' of null”
• 推荐加判断：const btn = document.querySelector('.btn'); if (btn) btn.addEventListener(...);
• 要选所有匹配项，请用 querySelectorAll()（返回 NodeList）

不复杂但容易忽略。写对选择器，再加个空值判断，基本就能稳稳用起来。