
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
で回す方法をコピペ用に残しました。自分用ですが、よろしければみなさんもご活用ください。