JavaScript での querySelector と querySelectorAll のマスター

JavaScript の querySelector と querySelectorAll

querySelector メソッドと querySelectorAll メソッドは、DOM 内の要素を選択するための JavaScript の強力なツールです。これらにより、開発者は CSS セレクターを使用して HTML 要素を識別および操作できるようになります。

---

1. querySelector

querySelector メソッドは、指定された CSS セレクターに一致する 最初の 要素を選択します。

構文:

document.querySelector(selector);

• 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

querySelectorAll メソッドは、指定された CSS セレクターに一致する すべて 要素を選択し、それらを NodeList として返します。

構文:

document.querySelectorAll(selector);

• 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 の使用) 使用例 1 つの要素が必要な場合 複数の要素が必要な場合 テーブル>

---

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.ライブコレクション vs 静的コレクション

• 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 コードがよりクリーンになり、より効率的になります!

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。