JavaScript

querySelectorAllで取得した要素をforEachで回す

最終更新日：: 2023/05/09

JavaScriptで、document.querySelectorAll()で取得した要素をforEachで回す方法をコピペ用に残します。
他にも方法はありますが、IEのサポートを考えなくてよければforEachで良いと思います。

querySelectorAll()について

querySelectorAll()メソッドは、同一のCSSセレクターが付いた要素を全て配列で格納することができます。CSSセレクターは、HTMLのclass属性の値を用いた要素の特定方法です。

<div class="wrapper-01">
   <div class="block"></div>
   <div class="block"></div>
   <div class="block"></div>
</div>

例えばこのHTMLに対して、
const blocks = document.querySelectorAll('.wrapper-01>.block');

とJavaScriptで書けば3つのblockというクラス名がつけられたdiv要素が取得できます。
配列の変数名を複数形にして、１つずつの変数をその単数形にするというのが慣例です。

ここでは、すべての要素が格納された配列の変数名をblocksとし、ひとつひとつの変数名をblockと定義した例でこのあとコードをご紹介します。

クラス名で取得できる場合は、getElementsByClassName()を使った方が処理が早くなりますので、getElementsByClassName()についても後述します。
また、querySelectorAll()を使う場合も、CSSセレクタ―は極力単純にした方が処理速度が速くなります。例えば(.hoge .wrapper-01>.block)とするよりも、(.wrapper-01>.block)の方が処理速度が速いということです。

なお、document.querySelectorAll('.block')はjQueryで$('.block')と書くのと同じです。
jQueryで書くと短く済み、それがjQueryの良さの一つとは言えますが、jQueryの存在意義の最たる部分はIneternetExplorerでも動くブラウザ互換にありました。その意味で、もはやお役御免で、サポート終了の未来が私には見えます。脱jQueryという言葉があるように、jQueryはもう使わないようにしていくことをおすすめします。

forEachで回す方法

アロー関数を用いる場合

<script>
const blocks = document.querySelectorAll('.wrapper-01>.block');
blocks.forEach( block =>{
   //処理
});
</script>

アロー関数というのは、function(block)をblock=>と書き換えられるものです。簡略化のための記法ですね。たいして文字数変わらないと思いますが・・。少しでも短くなる方で慣れておいた方が良いとは思います。

アロー関数を用いない場合

const blocks = document.querySelectorAll('.wrapper-01&gt;.block');
blocks.forEach( function( block ){
   //処理
});

アロー関数を使わない場合はこのようになります。

indexを取得する場合

const blocks = document.querySelectorAll('.wrapper-01&gt;.block');
blocks.forEach( function( block , index ){
   //処理
});

このように書くと、ここで言う変数blockが何番目であるかがindexに数値として入ります。なので、処理を記述するところでindexの値を用いることができます。

この時注意なのが、documentquerySelectorAll()で取得した値（ここで言うblocks）は配列であり、indexは0から始まるというところです。

例えば次の例は、indexが1の場合、すなわち2番目のblockだけclass名にhogeを加えるという処理となります。

const blocks = document.querySelectorAll('.block');
blocks.forEach( function( block , index ){
   if( index == 1 ){
      block.classList.add('hoge');
   }
});

まとめ

documentquerySelectorAllで取得した要素をforEachで回す方法をコピペ用に残しました。自分用ですが、よろしければみなさんもご活用ください。

BringFlower
稲田高洋（Takahiro Inada）

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010～2018年に人間中心設計専門家を保有、数年間ウェブアクセシビリティ基盤委員も務める。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。
2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。

ノウハウ一覧

querySelectorAllで取得した要素をforEachで回す

querySelectorAll()について

forEachで回す方法

アロー関数を用いる場合

アロー関数を用いない場合

indexを取得する場合

関連メソッド

querySelector()

getElementById()

getElementsByClassName()

getElementsByName()

まとめ