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要素が取得できます。
配列の変数名を複数形にして、１つずつの変数をその単数形にするというのが慣例です。ここでは、すべての要素が格納された配列を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）