JavaScriptで複数のDOM要素を効率的に選択する querySelectorAll の使い方

JavaScriptを使ってWebページの要素にアクセスする方法はいくつかありますが、querySelectorAllメソッドはその中でも特に強力で汎用性が高いものの一つです。今回の記事では、querySelectorAllメソッドの使い方とその実践的な応用例について詳しく解説します。

querySelectorAllとは？

querySelectorAllは、指定したCSSセレクタに一致するすべての要素を文書から選択し、NodeListオブジェクトとして返すメソッドです。これにより、一度に複数のDOM要素を効率的に選択することが可能になります。

const elements = document.querySelectorAll('.my-class');

以下は、boxというクラスを持つ4つの<div>要素を含むシンプルなHTMLの例です。

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box special">Box 4</div>

以下のJavaScriptコードは、.boxというCSSセレクタに一致するすべての要素を選択し、そのテキスト内容をコンソールに出力します。

const boxes = document.querySelectorAll('.box');
boxes.forEach(function(box) {
  console.log(box.textContent);
});

このコードにより、「Box 1」から「Box 4」までがコンソールに順に表示されます。

querySelectorAllメソッドは、より複雑なCSSセレクタも使用できます。例えば、特定のクラスを持つ要素と特定のタグ名を持つ要素を同時に選択することが可能です。

const specialBoxes = document.querySelectorAll('.box.special');

このコードは、boxとspecialの両方のクラスを持つ要素を選択します。

querySelectorAllメソッドで得られるNodeListオブジェクトは、配列のようなオブジェクトですが、通常の配列のメソッド（map、filterなど）は直接使えません。これらのメソッドを使用するためには、NodeListを実際の配列に変換する必要があります。

const boxesArray = Array.from(boxes);
const boxTexts = boxesArray.map(box => box.textContent);

これにより、選択したDOM要素に対して、mapやfilterなどの配列メソッドを利用できるようになります。

querySelectorAllは、CSSセレクタを使ってDOMから複数の要素を効率的に選択するための強力なメソッドです。今回の記事で紹介したテクニックを活用すれば、よりシンプルでメンテナンスしやすいコードを書く一助となるでしょう。