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

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

document.querySelectorAllについて

document.querySelectorAllは、同一のクラス名が付いた要素を全て配列で格納することができます。

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

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

とJavaScriptで書けば3つのblockというクラス名がつけられたdiv要素が取得できます。
配列の変数名を複数形にして、1つずつの変数をその単数形にするというのが慣例です。ここでは、すべての要素が格納された配列をblocksとし、ひとつひとつをblockという変数で定義した例でこのあとコードをご紹介します。

forEachで回す方法

アロー関数を用いる場合

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

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

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

const blocks = document.querySelectorAll('.block');
blocks.forEach( function( block ){
   //処理
});

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

indexを取得する場合

const blocks = document.querySelectorAll('.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件の受賞歴あり。