JavaScript中querySelector用法详解

在 JavaScript 中，querySelector() 是用于在 DOM 中查找匹配指定 CSS 选择器的第一个元素的方法。它非常灵活且强大，支持所有 CSS 选择器语法。

基本用法：

javascript

复制

下载

// 查找整个文档中第一个匹配的元素
const element = document.querySelector("css选择器");

// 在特定父元素内查找
const parent = document.getElementById("parent");
const child = parent.querySelector("css选择器");

常见选择器示例：

1. 按标签名查找

javascript

复制

下载

const firstDiv = document.querySelector("div"); // 第一个 <div>

2. 按类名查找

javascript

复制

下载

const btn = document.querySelector(".submit-btn"); // 第一个 class="submit-btn" 的元素

3. 按 ID 查找

javascript

复制

下载

const header = document.querySelector("#main-header"); // id="main-header" 的元素

4. 按属性查找

javascript

复制

下载

const input = document.querySelector('input[type="email"]'); // 第一个 type=email 的 input

5. 组合选择器

javascript

复制

下载

const item = document.querySelector("ul.menu > li.active"); // ul.menu 下第一个 class="active" 的 li

6. 伪类选择器

javascript

复制

下载

const link = document.querySelector("a:hover"); // 无效（伪类需结合其他逻辑）
const row = document.querySelector("tr:nth-child(2)"); // 第一个表格的第二行

重要特性：

1. 只返回第一个匹配项
   如需所有匹配项，请用 querySelectorAll()

2. 支持所有 CSS3 选择器
   包括：> (子元素), + (相邻兄弟), ~ (通用兄弟), :not(), :nth-child() 等

3. 可在任意 DOM 元素上调用

   javascript

   复制

   下载

   const list = document.querySelector("#myList");
   const thirdItem = list.querySelector("li:nth-child(3)");

4. 无效选择器会抛出错误

   javascript

   复制

   下载

   document.querySelector("div::"); // 抛出 SyntaxError

实际用例：

html

复制

下载

运行

<ul id="cart">
  <li class="item">Apple</li>
  <li class="item on-sale">Banana</li>
  <li class="item">Orange</li>
</ul>

javascript

复制

下载

// 获取第二个 li (Banana)
const saleItem = document.querySelector("#cart .item.on-sale");

// 获取列表容器
const cart = document.querySelector("#cart");

// 在 cart 内查找第一个 .item
const firstItem = cart.querySelector(".item"); // Apple

与 getElementById 的区别：

最佳实践：

1. 优先使用 ID 选择器（性能最优）

   javascript

   复制

   下载

   // 快
   document.querySelector("#uniqueID");
   
   // 慢（需遍历）
   document.querySelector(".common-class");

2. 缓存查询结果（避免重复查询）

   javascript

   复制

   下载

   // 推荐
   const button = document.querySelector("#submit");
   button.addEventListener("click", handleSubmit);
   
   // 不推荐（每次点击都重新查询）
   document.querySelector("#submit").addEventListener(...);

3. 处理未找到元素的情况

   javascript

   复制

   下载

   const element = document.querySelector("#nonExistent");
   if (element) {
     // 安全操作元素
   }

注意：querySelector() 在 IE8+ 中支持基本选择器，现代浏览器支持完整 CSS3 选择器。