document.querySelector()用于精准查找单个DOM元素，支持所有CSS选择器语法；只返回首个匹配项或null，需用querySelectorAll()获取多个元素，且可在局部作用域调用。
document.querySelector() 是 JavaScript 中最常用、最灵活的元素查找方法之一，它直接支持所有标准 CSS 选择器语法，一条语句就能精准定位单个匹配的 DOM 元素。
基础用法：按标签、类名、ID 查找
你可以像写 CSS 一样写选择器，无需额外转换：
- 查一个 <div>：
document.querySelector('div') - 查 class 为 "btn" 的第一个元素：
document.querySelector('.btn') - 查 id 为 "header" 的元素：
document.querySelector('#header')
组合与进阶选择器：提高定位精度
它完全支持复合选择器，适合复杂结构：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 后代选择器（空格）：
document.querySelector('nav a')→ 找 nav 内部任意层级的 a 标签 - 子选择器（>）：
document.querySelector('ul > li:first-child')→ 找 ul 的第一个直接子 li - 属性选择器：
document.querySelector('input[type="email"]')→ 找 type 属性值为 email 的 input - 伪类选择器：
document.querySelector('button:disabled')→ 找当前被禁用的 button
注意事项：只返回第一个匹配项
querySelector() 永远只返回第一个匹配的元素（或 null），不会返回列表。 如果你需要多个元素，请改用 document.querySelectorAll()，它返回 NodeList。
立即学习“Java免费学习笔记（深入）”；
- 错误用法：
document.querySelector('.item').innerText = 'hello';—— 只改第一个 .item - 正确批量操作：
document.querySelectorAll('.item').forEach(el => el.innerText = 'hello'); - 查不到时返回
null，使用前建议判断：const el = document.querySelector('.modal'); if (el) { el.style.display = 'block'; }
实战小技巧：动态拼接与作用域限定
你可以在已有元素上调用 querySelector，实现局部查找（类似 CSS 的上下文）：
- 在某个容器内找按钮：
const card = document.querySelector('.card'); const btn = card.querySelector('button.delete'); - 拼接变量时注意转义（尤其含特殊字符的 class 或 ID）：
const id = 'user-123'; document.querySelector(`[data-id="${id}"]`); - 避免注入风险：不要直接拼接用户输入到选择器中，必要时先校验或使用
getElementById等更安全方式
