document.queryselector()用于精准查找单个dom元素，支持所有css选择器语法；只返回首个匹配项或null，需用queryselectorall()获取多个元素，且可在局部作用域调用。
document.querySelector() 是 JavaScript 中最常用、最灵活的元素查找方法之一，它直接支持所有标准 CSS 选择器语法，一条语句就能精准定位单个匹配的 DOM 元素。
基础用法：按标签、类名、ID 查找
你可以像写 CSS 一样写选择器，无需额外转换：
- 查一个 ：
document.querySelector('div')- 查 class 为 "btn" 的第一个元素：
document.querySelector('.btn')- 查 id 为 "header" 的元素：
document.querySelector('#header')组合与进阶选择器：提高定位精度
它完全支持复合选择器，适合复杂结构：
Alibabacloud Sdk Client Initialization For Java下载在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 后代选择器（空格）：
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。- 错误用法：
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等更安全方式
- 查 class 为 "btn" 的第一个元素：
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
