【转】[JavaScript] document.querySelector 用法

转自：kimi.ai

document.querySelector 是 JavaScript 中用于操作 DOM 的一个非常重要的方法。它允许你通过 CSS 选择器来选择页面上的元素。querySelector 是一种非常强大且灵活的方法，可以让你轻松地获取页面上的单个元素。

基本语法

JavaScript复制

document.querySelector(selector);

• selector：一个字符串，表示 CSS 选择器（如类名、ID、标签名、属性选择器等）。
• 返回值：返回文档中第一个匹配指定选择器的元素。如果没有找到匹配的元素，则返回 null。

---

示例

1. 通过 ID 选择元素

HTML复制

<div id="myDiv">Hello, World!</div>

JavaScript复制

const element = document.querySelector("#myDiv");
console.log(element); // <div id="myDiv">Hello, World!</div>

2. 通过类名选择元素

HTML复制

<div class="box">Box 1</div>
<div class="box">Box 2</div>

JavaScript复制

const firstBox = document.querySelector(".box");
console.log(firstBox); // <div class="box">Box 1</div>

3. 通过标签名选择元素

HTML复制

<p>Paragraph 1</p>
<p>Paragraph 2</p>

JavaScript复制

const firstParagraph = document.querySelector("p");
console.log(firstParagraph); // <p>Paragraph 1</p>

4. 通过属性选择器选择元素

HTML复制

<input type="text" name="username">

JavaScript复制

const input = document.querySelector("[name='username']");
console.log(input); // <input type="text" name="username">

5. 选择嵌套元素

HTML复制

<div class="container">
    <p class="text">Hello</p>
</div>

JavaScript复制

const paragraph = document.querySelector(".container .text");
console.log(paragraph); // <p class="text">Hello</p>

---

注意事项

1. 返回单个元素：querySelector 只会返回第一个匹配的元素。如果你需要选择多个元素，请使用 document.querySelectorAll，它会返回一个包含所有匹配元素的 NodeList。
2. 选择器的优先级：querySelector 使用 CSS 选择器的规则，因此更具体的规则会优先匹配。例如，#id 的优先级高于 .class。
3. 返回值为 null：如果没有找到匹配的元素，querySelector 会返回 null，因此在使用返回的元素之前，最好进行检查。
   JavaScript复制

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

4. 动态内容：如果你在 DOM 动态变化后需要重新选择元素，记得再次调用 querySelector，因为它的结果是基于当前 DOM 的快照。

---

与 document.getElementById 和 document.getElementsByClassName 的比较

• document.getElementById：
  • 只能通过 ID 选择元素。
  • 返回单个元素。
  • 比 querySelector 更快，但功能更有限。
• document.getElementsByClassName：
  • 只能通过类名选择元素。
  • 返回一个 HTMLCollection，包含所有匹配的元素。
  • 功能有限，不如 querySelector 灵活。
• document.querySelector：
  • 支持所有 CSS 选择器。
  • 返回第一个匹配的元素。
  • 功能强大，但比 getElementById 稍微慢一点。

---

总结

document.querySelector 是一个非常强大且灵活的方法，适用于选择页面上的单个元素。它支持所有 CSS 选择器，让你可以轻松地通过各种规则选择元素。如果你需要选择多个元素，请使用 document.querySelectorAll。