掌握 JavaScript 中的 querySelector 和 querySelectorAll

JavaScript 中的 querySelector 和 querySelectorAll

querySelector 和 querySelectorAll 方法是 JavaScript 中用于选择 DOM 中元素的强大工具。它们允许开发人员使用 CSS 选择器来识别和操作 HTML 元素。

---

1.查询选择器

querySelector 方法选择与指定 CSS 选择器匹配的 第一个 元素。

语法：

document.querySelector(selector);

• 选择器：代表 CSS 选择器的字符串（例如，“#id”、“.class”、“tag”）。

示例：

<div>





<pre class="brush:php;toolbar:false">const firstText = document.querySelector(".text");
console.log(firstText.textContent); // Output: First paragraph

---

2.查询选择器全部

querySelectorAll 方法选择与指定 CSS 选择器匹配的 所有 元素，并将它们作为 NodeList.

返回

语法：

document.querySelectorAll(selector);

• 选择器：代表 CSS 选择器的字符串。

示例：

const allTexts = document.querySelectorAll(".text");
allTexts.forEach((text) => console.log(text.textContent));
// Output:
// First paragraph
// Second paragraph

访问 NodeList 中的元素：

const secondText = allTexts[1];
console.log(secondText.textContent); // Output: Second paragraph

---

3. querySelector 和 querySelectorAll 之间的区别

功能 查询选择器 querySelectorAll 标题>

Feature	querySelector	querySelectorAll
Result	First matching element	All matching elements
Return Type	Single DOM element	NodeList (array-like structure)
Iteration	Not iterable	Iterable (e.g., using forEach)
Use Case	When one element is needed	When multiple elements are needed

结果 第一个匹配元素 所有匹配元素 返回类型 单个 DOM 元素 NodeList（类似数组的结构） 迭代 不可迭代 可迭代（例如，使用 forEach） 用例 当需要一个元素时 当需要多个元素时 表>

---

4.组合选择器

您可以组合 CSS 选择器来进行更具体的查询。

示例：

document.querySelector(selector);

---

5.常见用例

按 ID 选择：

<div>





<pre class="brush:php;toolbar:false">const firstText = document.querySelector(".text");
console.log(firstText.textContent); // Output: First paragraph

按班级选择：

document.querySelectorAll(selector);

按标签名称选择：

const allTexts = document.querySelectorAll(".text");
allTexts.forEach((text) => console.log(text.textContent));
// Output:
// First paragraph
// Second paragraph

属性选择器：

const secondText = allTexts[1];
console.log(secondText.textContent); // Output: Second paragraph

第 N 个子选择器：

const containerParagraph = document.querySelector("#container .text");
console.log(containerParagraph.textContent); // Output: First paragraph

---

6.迭代 querySelectorAll 中的元素

由于 querySelectorAll 返回一个 NodeList，因此您可以使用 forEach、for...of 或索引循环遍历它。

示例：

const header = document.querySelector("#header");

---

7.实时采集与静态采集

• querySelectorAll 返回一个 静态 NodeList，这意味着如果 DOM 更改，它不会更新。
• 使用 getElementsByClassName 或 getElementsByTagName 进行实时集合。

示例：

const buttons = document.querySelectorAll(".button");

---

8.错误处理

如果没有找到匹配元素：

• querySelector：返回 null。
• querySelectorAll：返回一个空的 NodeList。

示例：

const paragraphs = document.querySelectorAll("p");

---

9.总结

• 使用querySelector选择单个元素，使用querySelectorAll选择多个元素。
• 两种方法都支持强大的 CSS 选择器以实现精确定位。
• querySelectorAll 返回一个静态 NodeList，可以轻松迭代。
• 它们是现代 DOM 操作的多功能工具，通常比 getElementById 或 getElementsByClassName 等旧方法更受青睐。

掌握这些方法将使你的 JavaScript 代码更加干净、高效！

嗨，我是 Abhay Singh Kathayat！
我是一名全栈开发人员，拥有前端和后端技术方面的专业知识。我使用各种编程语言和框架来构建高效、可扩展且用户友好的应用程序。
请随时通过我的商务电子邮件与我联系：kaashshorts28@gmail.com。