JavaScript QuerySelectorAllの5つの使い方とサンプルコード

はじめに

この記事を読めば、JavaScriptのQuerySelectorAllを使って簡単に要素を取得する方法が身につくことでしょう。

初心者の方でも分かりやすく解説し、5つのサンプルコードをご紹介しています。

さらに、注意点やカスタマイズ方法も解説していますので、ぜひ最後までお読みください。

QuerySelectorAllは、JavaScriptでHTML要素を選択するためのメソッドです。

指定したセレクタに一致するすべての要素をNodeList形式で取得できます。

これにより、複数の要素に対して同じ操作を行ったり、特定の条件に合致する要素を抽出することが可能になります。

querySelectorAllメソッドは、次のように使用します。

const elements = document.querySelectorAll("セレクタ");

それでは、具体的な使い方を見ていきましょう。

このコードでは、クラス名を使って要素を取得する方法を紹介しています。

この例では、クラス名が”sample”の要素をすべて取得しています。

const elements = document.querySelectorAll(".sample");

このコードでは、IDを使って要素を取得する方法を紹介しています。

この例では、IDが”sample”の要素を取得しています。

const element = document.querySelector("#sample");

このコードでは、属性を使って要素を取得する方法を紹介しています。

この例では、data-sample属性がある要素をすべて取得しています。

const elements = document.querySelectorAll("[data-sample]");

このコードでは、複数の条件を組み合わせて要素を取得する方法を紹介しています。

この例では、クラス名が”sample”で、かつdata-sample属性がある要素をすべて取得しています。

const elements = document.querySelectorAll(".sample[data-sample]");

このコードでは、querySelectorAllで取得した要素のスタイルを変更する方法を紹介しています。

この例では、クラス名が”sample”の要素の背景色を赤に変更しています。

const elements = document.querySelectorAll(".sample");
elements.forEach(element => {
  element.style.backgroundColor = "red";
});

querySelectorAllはNodeListを返しますが、これは配列ではありません。
そのため、一部の配列メソッドが使用できません。
対処法としては、Array.from()やスプレッド構文を使ってNodeListを配列に変換することができます。
querySelectorAllで取得した要素がない場合、空のNodeListが返されます。
要素が取得できているか確認するためには、elements.lengthで要素の数を確認しましょう。