document.querySelector

document.querySelector 是 JavaScript 中的一个非常强大的方法，用于选择文档中的元素。它是现代前端开发中常用的 DOM 操作方法之一，可以替代传统的 document.getElementById、document.getElementsByClassName 等方法，提供更简洁和灵活的选择器语法。

基本语法

JavaScript复制

document.querySelector(selector);

• selector：CSS 选择器字符串，用于选择页面中的元素。可以是类名、ID、标签名、属性选择器等。
• 返回值：返回匹配选择器的第一个元素。如果没有匹配的元素，则返回 null。

---

使用场景和示例

1. 选择单个元素

document.querySelector 只会返回匹配选择器的第一个元素。如果需要选择多个元素，请使用 document.querySelectorAll。

示例 1：选择一个元素

JavaScript复制

// 选择一个具有特定 ID 的元素
const element = document.querySelector("#myElement");
console.log(element); // 返回 <div id="myElement"></div>

// 选择一个具有特定类名的元素
const element = document.querySelector(".myClass");
console.log(element); // 返回第一个 <div class="myClass"></div>

示例 2：选择第一个子元素

JavaScript复制

// 选择第一个 <li> 元素
const firstItem = document.querySelector("ul li");
console.log(firstItem); // 返回第一个 <li> 元素

---

2. 使用属性选择器

document.querySelector 支持 CSS 属性选择器，可以精确选择具有特定属性的元素。

示例 3：选择具有特定属性的元素

JavaScript复制

// 选择具有特定属性的元素
const link = document.querySelector("a[href='https://example.com']");
console.log(link); // 返回 <a href="https://example.com">Example</a>

---

3. 选择伪类

document.querySelector 也支持伪类选择器，例如 :first-child、:last-child、:nth-child 等。

示例 4：选择伪类元素

JavaScript复制

// 选择第一个子元素
const firstItem = document.querySelector("ul li:first-child");
console.log(firstItem); // 返回第一个 <li> 元素

// 选择最后一个子元素
const lastItem = document.querySelector("ul li:last-child");
console.log(lastItem); // 返回最后一个 <li> 元素

---

4. 选择嵌套元素

document.querySelector 支持嵌套选择器，可以精确选择嵌套结构中的元素。

示例 5：选择嵌套元素

HTML复制

<div class="container">
    <p class="text">Hello, World!</p>
</div>

预览

JavaScript复制

// 选择嵌套的 <p> 元素
const paragraph = document.querySelector(".container .text");
console.log(paragraph); // 返回 <p class="text">Hello, World!</p>

---

注意事项

1. 返回值为单个元素：
   • document.querySelector 只返回匹配选择器的第一个元素。如果需要选择所有匹配的元素，请使用 document.querySelectorAll，它返回一个 NodeList。
2. 选择器无效时返回 null：
   • 如果没有匹配的元素，document.querySelector 返回 null。在使用返回的元素之前，建议检查是否为 null，以避免错误。
   JavaScript复制

   const element = document.querySelector("#nonExistentElement");
   if (element) {
       console.log("Element found!");
   } else {
       console.log("Element not found!");
   }

3. 性能优化：
   • 如果需要频繁选择同一个元素，建议将结果存储在变量中，避免重复查询。
4. 与 querySelectorAll 的区别：
   • document.querySelector 返回单个元素。
   • document.querySelectorAll 返回一个 NodeList，包含所有匹配的元素。
   JavaScript复制

   // 使用 querySelectorAll 选择所有匹配的元素
   const items = document.querySelectorAll("ul li");
   items.forEach(item => {
       console.log(item);
   });

---

总结

document.querySelector 是一个非常强大的方法，用于选择页面中的单个元素。它支持 CSS 选择器语法，可以精确选择具有特定属性、类名、ID 或嵌套结构的元素。在使用时，建议检查返回值是否为 null，以避免潜在的错误。