HTML・CSS

querySelectorAllしてforEachする入門【JavaScript】

2022/01/31

現在JavaScriptを学習中なのですが、最近覚えた「querySelectorAllで複数要素を取得して、forEachで全ての要素に処理をする」という合わせ技が非常に便利で感動しました。

初学者である私のような学習段階限定で便利になる技というわけではなく、querySelectorAllとforEachのメソッドを使う方法はモダンなJavaScriptにおいて頻繁に利用されている用法のようです。

そこで本記事ではquerySelectorAllとforEachの使い方を、実際に簡単なものを動かしつつ、例を交えて紹介させていただきます。

querySelectorAllとforEachとは

[querySelectorAll]

→HTMLに存在する複数の要素を取得することができる(liタグを一気に取得するようなイメージ)

特徴
・class名、id名、タグ名、どこからでも要素を取得できる。
単数を取得するquerySelectorと複数を取得するquerySelectorAllでほとんど用途が足りてしまうのではないかというほど、便利なメソッド
・nodeListという状態で取得することになるので、少し工夫して処理を加える必要がある

[forEach]

→querySelectorAllで取得した要素や配列などに、繰り返しの処理をすることができる

特徴
・以前は「for」で表現されることが多かった繰り返し処理(ループ処理)に代替される形で、モダンJavaScriptで主流の繰り返し処理記法になっている
・類似メソッドとして、map、filter、sliceなどがある

基本の書き方

まずは基本から始めてみます。

以下のように四角い要素を4つ用意します。

See the Pen Untitled by shinobi (@shinobi-hattori) on CodePen.

次に、変数を定義して4つの要素をquerySelectorAllで取得します

const box = document.querySelectorAll(‘.box’);

querySelectorAllを使用する場合は、CSSを記述する場合と同じようにclass名であれば「.」、idであれば「#」をつける必要があります。

ここにforEachを追記していきます。

forEachの基本的な書き方は以下のようになっています。

変数.forEach((element) => {
element.innerHTML = ‘テキスト’; //処理の内容
});

elementの部分は、現在ループで処理している要素を表しています。

いわゆる「引数」にあたります。

要素を表すためにelementと書いていますが、名前はelement以外でも大丈夫です。

また、処理を書く際は、

変数.innerHTML = ‘テキスト’;

のように毎回変数名を書く必要がなく、要素を指定する変数の部分はelementに置き換わります。

これを踏まえ、デモのscriptを追記していきます。

const box = document.querySelectorAll(‘.box’);

box.forEach((element) => {
element.innerHTML = ‘boxです’;
});

ここまでで以下のようになります。

全ての要素にまとめて処理をすることができました。

See the Pen Untitled by shinobi (@shinobi-hattori) on CodePen.

クリックイベントと組み合わせる

より実用的にしていくため、forEachの全体処理をクリックイベントで変化するようにしていきます。

HTML要素に <button class=”btn”>ボタン</button>を追記し、CSSを整えます。

.btn {
width: 100px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}

続いて、button要素を取得します。

要素の取得はquerySelectorAllの単数系のquerySelectorです。

const btn = document.querySelector(‘.btn’);

クリックイベントの基本形が

変数.addEventListener(‘click’, () => {
//ここに処理を書く
});

なので、ここの処理の部分に先ほどのforEachの内容を入れてしまって、

const box = document.querySelectorAll(‘.box’);
const btn = document.querySelector(‘.btn’);

btn.addEventListener(‘click’, () => {
box.forEach((element) => {
element.innerHTML = ‘boxです’;
});
});

このようになります。

ここまでの全体が以下の通りです。

ボタンクリックのイベントをきっかけに、要素全体の処理ができているかと思います。

See the Pen Untitled by shinobi (@shinobi-hattori) on CodePen.