JavaScriptとquerySelectorAll: W3Schoolsを参照

querySelectorAllの基本

JavaScriptのquerySelectorAllメソッドは、指定したCSSセレクターに一致するドキュメント内のすべての要素をNodeListオブジェクトとして返します。このメソッドは以下のように使用します。

var elements = document.querySelectorAll(selector);

ここで、selectorはCSSセレクターを表す文字列です。例えば、すべての<p>要素を選択するには、"p"というセレクターを使用します。

var pElements = document.querySelectorAll("p");

このコードは、ドキュメント内のすべての<p>要素を選択し、それらをNodeListオブジェクトとしてpElementsに格納します。このNodeListオブジェクトは配列のように扱うことができ、各要素にはインデックスを使用してアクセスできます。

var firstPElement = pElements[0];  // 最初の<p>要素

しかし、NodeListオブジェクトは静的なものであり、ドキュメントが変更されても自動的に更新されません。そのため、ドキュメントの状態を反映する最新の要素を取得するには、必要に応じてquerySelectorAllを再度呼び出す必要があります。また、NodeListは配列ではないため、配列のメソッド（push、popなど）は使用できません。しかし、forEachメソッドを使用して各要素を反復処理することは可能です。

pElements.forEach(function(element) {
  console.log(element);
});

これがquerySelectorAllの基本的な使い方です。次のセクションでは、querySelectorAllの使用例をいくつか見てみましょう。

querySelectorAllの使用例

JavaScriptのquerySelectorAllメソッドは非常に強力で、複雑なセレクターを使用してドキュメントから要素を選択することができます。以下にいくつかの使用例を示します。

クラスによる選択

querySelectorAllを使用して、特定のクラスを持つすべての要素を選択することができます。以下のコードは、クラス名highlightを持つすべての要素を選択します。

var highlightedElements = document.querySelectorAll(".highlight");

IDによる選択

IDを使用して特定の要素を選択することもできます。以下のコードは、IDがmyElementの要素を選択します。

var myElement = document.querySelectorAll("#myElement");

複数のセレクターによる選択

カンマを使用して複数のセレクターを指定することができます。以下のコードは、<p>要素とクラス名highlightを持つすべての要素を選択します。

var pAndHighlightedElements = document.querySelectorAll("p, .highlight");

階層的なセレクターによる選択

querySelectorAllはCSSセレクターの全ての力を利用できます。したがって、階層的なセレクターを使用して要素を選択することができます。以下のコードは、IDがmyListの要素の子孫であるすべての<li>要素を選択します。

var listItems = document.querySelectorAll("#myList li");

これらの例からわかるように、querySelectorAllは非常に強力で柔軟なメソッドです。次のセクションでは、querySelectorAllとCSSセレクターの詳細について見ていきましょう。

querySelectorAllとCSSセレクター

JavaScriptのquerySelectorAllメソッドは、CSSセレクターを使用してドキュメントから要素を選択します。このセクションでは、querySelectorAllで使用できるいくつかの主要なCSSセレクターについて説明します。

タグ名による選択

最も基本的なセレクターはタグ名です。例えば、すべての<p>要素を選択するには、"p"というセレクターを使用します。

var pElements = document.querySelectorAll("p");

クラス名による選択

ドット.を使用してクラス名による選択を行うことができます。例えば、クラス名highlightを持つすべての要素を選択するには、".highlight"というセレクターを使用します。

var highlightedElements = document.querySelectorAll(".highlight");

IDによる選択

ハッシュ#を使用してIDによる選択を行うことができます。例えば、IDがmyElementの要素を選択するには、"#myElement"というセレクターを使用します。

var myElement = document.querySelectorAll("#myElement");

属性による選択

角括弧[]を使用して属性による選択を行うことができます。例えば、data-id属性が100のすべての要素を選択するには、"[data-id='100']"というセレクターを使用します。

var dataIdElements = document.querySelectorAll("[data-id='100']");

これらはquerySelectorAllで使用できるCSSセレクターの一部です。他にも様々なセレクターがあり、それらを組み合わせることで非常に複雑な選択を行うことができます。次のセクションでは、querySelectorAllの戻り値について見ていきましょう。

querySelectorAllの戻り値

JavaScriptのquerySelectorAllメソッドは、指定したCSSセレクターに一致するすべての要素を含むNodeListオブジェクトを返します。このNodeListオブジェクトは配列のように扱うことができますが、配列ではありません。

var elements = document.querySelectorAll("p");
console.log(elements.length);  // <p>要素の数
console.log(elements[0]);  // 最初の<p>要素

NodeListオブジェクトは配列のように見えますが、配列のメソッド（push、popなど）は使用できません。しかし、forEachメソッドを使用して各要素を反復処理することは可能です。

elements.forEach(function(element) {
  console.log(element);
});

また、NodeListオブジェクトは静的なものであり、ドキュメントが変更されても自動的に更新されません。そのため、ドキュメントの状態を反映する最新の要素を取得するには、必要に応じてquerySelectorAllを再度呼び出す必要があります。

これがquerySelectorAllの戻り値についての基本的な説明です。この情報がJavaScriptでのquerySelectorAllの使用に役立つことを願っています。次のセクションでは、さらに詳細な使用例やヒントを提供します。お楽しみに！