掌握 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。