MENU
プログラミングを学んで自由な働き方を手に入れよう！Webエンジニアとして活躍するためのプログラミング学習方法・スクール情報メディア
  1. ホーム
  2. プログラミング
  3. JavaScript
  4. JavaScriptでquerySelectorAllを使って要素を取得してforEachで処理する方法

JavaScriptでquerySelectorAllを使って要素を取得してforEachで処理する方法

JavaScript
当サイトでは一部リンクに広告が含まれています
アイキャッチ

JavaScriptで特定の条件に合致する複数の要素を取得したい時は、querySelectorAllメソッドを使うのが便利です。

取得した要素をforEachでループ処理することで、効率的に目的の処理ができるでしょう。

今回は、querySelectorAllの基本的な使い方から応用までを、豊富なサンプルコードを交えて丁寧に解説します。
JavaScriptでの要素の取得と処理について理解を深めましょう！

この記事を読めば、次のようなことができるようになります。

  • querySelectorAllで複数の要素を取得できる
  • 取得した要素をforEachを使ってループ処理できる
  • さまざまな条件で要素を絞り込んで取得できる
この記事を書いた人
筆者のプロフィールアイコン
  • 現役のフルスタックエンジニアとして活躍中
  • 開発チームリーダーとして複数プロジェクトをリード
  • 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
  • プログラミングスクールのカリキュラム執筆経験あり
目次

querySelectorAllの基本的な使い方

querySelectorAllメソッドは、JavaScriptからHTMLの要素を取得するために使います。引数にはCSSセレクターを指定して、条件に合致する要素を取得できます。

たとえば、次のようなHTMLがあったとします。

<ul>
  <li class="item">りんご</li>
  <li class="item">バナナ</li>
  <li>ぶどう</li>
  <li class="item">オレンジ</li>
</ul>

ここから、itemクラスが付いたli要素をすべて取得したい場合は、querySelectorAllを次のように使います。

const items = document.querySelectorAll('.item');
console.log(items);

これを実行すると、コンソールにはitemクラスを持つ3つのli要素からなるNodeListオブジェクトが出力されます。

  • querySelectorAllは文書内のすべての要素から、引数で指定したCSSセレクターに合致するものを抽出する
  • 取得される要素は、NodeListオブジェクトとして返される

forEachを使ってループ処理する

querySelectorAllで取得した要素は、forEachメソッドを使うことで簡単にループ処理できます。先ほどの例の続きで、各li要素のテキストをコンソールに出力してみましょう。

const items = document.querySelectorAll('.item');

items.forEach((item) => {
  console.log(item.textContent);
});

これを実行すると、コンソールには次のように出力されるはずです。

りんご
バナナ
オレンジ

forEachは配列に対して使えるメソッドで、各要素に対して引数で渡した関数を実行します。querySelectorAllの戻り値はNodeListオブジェクトですが、配列と同じようにforEachが使えます。

コールバック関数には、
・各ループの要素
・インデックス
・ループ処理中のNodeList
の3つが渡されます。必要に応じてこれらの引数を使い分けましょう。

インデックスを使う例

インデックスを使うと、特定の要素だけ処理を変えることもできます。

const items = document.querySelectorAll('.item');

items.forEach((item, index) => {
  if (index === 1) {
    item.textContent += ' (取り置き)';
  }
});

これは、2番目の要素（バナナ）だけテキストを変更する例です。

インデックスは0から始まるので注意しましょう。

さまざまな要素の取得方法

querySelectorAllでは、CSSセレクターを使ってさまざまな条件で要素を取得できます。よく使う例をいくつか紹介しましょう。

タグ名で取得

特定のHTMLタグを持つ要素をすべて取得するには、単純にタグ名を指定します。

// すべてのdiv要素を取得
const divs = document.querySelectorAll('div');

クラス名で取得

特定のクラス名を持つ要素をすべて取得するには、.クラス名のように指定します。

// itemクラスを持つ要素を取得

ID名で取得

特定のID名を持つ要素を取得するには、#ID名のように指定します。

// ID名が "main" の要素を取得
const main = document.querySelectorAll('#main');

ID名は基本的に1ページ内で一意のものなので、querySelectorAllの戻り値は必ず要素数1のNodeListになります。
ID名で1つの要素を取得したい場合は、querySelectorメソッドを使った方が効率的です。

属性で取得

特定の属性名や属性値を持つ要素を取得することもできます。

// type属性を持つinput要素をすべて取得
const inputs = document.querySelectorAll('input[type]');
// type属性が"text"のinput要素をすべて取得
const textInputs = document.querySelectorAll('input[type="text"]');

複数の条件を組み合わせる

カンマ区切りで複数のセレクターを指定すると、OR条件になります。

// div要素またはp要素を取得
const elements = document.querySelectorAll('div, p');

スペース区切りで複数のセレクターを指定すると、AND条件になります。

// "container"クラスを持つdiv要素を取得
const containers = document.querySelectorAll('div.container');

より複雑な条件も、CSSセレクターが扱えるものであれば自在に組み立てられます。

さいごに

今回は、JavaScriptのquerySelectorAllメソッドを使って、特定の条件に合致する要素をまとめて取得し、forEachを使って処理する方法を見てきました。

querySelectorAllはCSSセレクターの力を利用できるので、HTMLの構造を意識しながら、柔軟に必要な要素を取得することができます。ぜひ色々な場面で活用してみてください。

最初は書き方に戸惑うかもしれませんが、CSSセレクターの知識があれば、すぐに扱えるようになるはずです。よりインタラクティブなウェブサイトを実現するためにも、querySelectorAllをマスターしましょう！

JavaScriptを効率的に身につける勉強法は？

JavaScript には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。

  • JavaScript を身に付けてエンジニアになるには何をすればいい？
  • 何から勉強すればいいんだろう？
  • 効率よく勉強するには？

JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。

そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？

Muscle Coding
【初心者向け】JavaScriptの勉強法3選を現役エンジニアが比較・解説！ | Muscle Coding JavaScriptの効果的な学習方法を現役エンジニアが解説！本、動画教材（Udemy）、プログラミングスクールの特徴を比較し、最適な方法を提案します。初心者でも理解しやすい…
JavaScript
JavaScript
目次