JavaScriptでquerySelectorを使って複数の要素を選択する方法

querySelectorとは何か

JavaScriptのquerySelectorは、CSSセレクタを使用してドキュメント内の特定の要素を選択するためのメソッドです。このメソッドは、指定したCSSセレクタに一致するドキュメント内の最初のElementを返します。一致する要素がない場合はnullを返します。

例えば、次のように使用することができます。

let element = document.querySelector(".myClass");

上記のコードは、myClassというクラスを持つ最初の要素を選択します。querySelectorは非常に強力で、複雑なセレクタも扱うことができます。ただし、querySelectorは最初の一致する要素のみを返すため、複数の要素を選択するにはquerySelectorAllを使用する必要があります。これについては後述します。

querySelectorAllメソッドの基本的な使い方

JavaScriptのquerySelectorAllメソッドは、CSSセレクタを使用してドキュメント内の特定の要素を選択するためのメソッドです。このメソッドは、指定したCSSセレクタに一致するドキュメント内のすべてのElementをNodeListとして返します。一致する要素がない場合は空のNodeListを返します。

例えば、次のように使用することができます。

let elements = document.querySelectorAll(".myClass");

上記のコードは、myClassというクラスを持つすべての要素を選択します。querySelectorAllは非常に強力で、複雑なセレクタも扱うことができます。

ただし、querySelectorAllが返すNodeListは静的なもので、後からドキュメントが更新されても内容は変わりません。また、NodeListは配列ではないため、配列のメソッド（例えばmapやreduce）は直接使用できません。しかし、Array.fromメソッドを使用することでNodeListを配列に変換することができます。

let elementsArray = Array.from(document.querySelectorAll(".myClass"));

これにより、配列のメソッドを使用して要素を操作することが可能になります。これらの詳細については後述します。

複数の条件で要素を選択する方法

JavaScriptのquerySelectorAllメソッドを使用すると、複数の条件を指定して要素を選択することができます。これは、CSSセレクタの強力な機能を利用したものです。

例えば、特定のクラスを持つ要素をすべて選択するには、次のようにします。

let elements = document.querySelectorAll(".class1, .class2");

上記のコードは、class1またはclass2というクラスを持つすべての要素を選択します。

また、特定のタグ名を持つ要素を選択するには、次のようにします。

let elements = document.querySelectorAll("div, span");

上記のコードは、divまたはspanタグのすべての要素を選択します。

さらに、特定の属性を持つ要素を選択するには、次のようにします。

let elements = document.querySelectorAll("[data-attribute1], [data-attribute2]");

上記のコードは、data-attribute1またはdata-attribute2という属性を持つすべての要素を選択します。

これらの方法を組み合わせることで、非常に複雑な条件で要素を選択することが可能になります。ただし、複雑な条件を指定するとパフォーマンスに影響を与える可能性があるため、注意が必要です。また、querySelectorAllが返すNodeListは静的なもので、後からドキュメントが更新されても内容は変わりません。これらの詳細については後述します。

複数のIDやクラスを選択する例

JavaScriptのquerySelectorAllメソッドを使用すると、複数のIDやクラスを持つ要素を選択することができます。以下に具体的な例を示します。

複数のIDを選択する例

let elements = document.querySelectorAll("#id1, #id2");

上記のコードは、id1またはid2というIDを持つすべての要素を選択します。

複数のクラスを選択する例

let elements = document.querySelectorAll(".class1, .class2");

上記のコードは、class1またはclass2というクラスを持つすべての要素を選択します。

querySelectorAllの利点と制限

JavaScriptのquerySelectorAllメソッドは、CSSセレクタを使用してドキュメント内の特定の要素を選択するための強力なツールです。しかし、その利点とともにいくつかの制限もあります。

利点

柔軟性: querySelectorAllはCSSセレクタを使用するため、非常に柔軟に要素を選択することができます。ID、クラス、属性、タグ名など、あらゆる条件で要素を選択することが可能です。
一致するすべての要素: querySelectorAllは一致するすべての要素を選択します。これは、特定の条件を満たすすべての要素に対して操作を行いたい場合に非常に便利です。

制限

静的なNodeList: querySelectorAllが返すNodeListは静的です。つまり、後からドキュメントが更新されてもNodeListの内容は変わりません。これは、動的に変化するDOMに対して操作を行いたい場合には注意が必要です。
配列ではない: NodeListは配列ではないため、配列のメソッド（例えばmapやreduce）は直接使用できません。しかし、Array.fromメソッドを使用することでNodeListを配列に変換することができます。
パフォーマンス: 複雑なセレクタを使用するとパフォーマンスに影響を与える可能性があります。特に大規模なドキュメントでは、セレクタの最適化が重要になります。

以上がquerySelectorAllの主な利点と制限です。これらを理解することで、より効果的にquerySelectorAllを使用することができます。次に、具体的な使用例を見てみましょう。これについては後述します。