【JavaScript】複数の要素(divタグ、pタグなど)を取得して操作する方法

同じclass名を指定している複数の要素(divタグやpタグなど)に、JavaScriptでまとめて動きをつけたい！
という時、簡単そうに思えて実はひと手間必要です。

JavaScriptでid、classを取得してみる

まずは基本として、JavaScriptで1つの要素だけ取得する方法を見てみましょう。

See the Pen jsでid・class取得 by spiqa design (@spiqa_design) on CodePen.

1つの要素のみ取得する場合はidを取得

まずはCodepenのJavaScriptの記述「idを取得」をご覧ください。

JavaScriptで要素を取得する方法として最もシンプルな方法が、「getElementById」です。

上記コードでは一番上のpタグにtext1 idを指定し、クリックしたらテキストが赤くなるというJavaScriptを記述しています。

たった1つの要素のみ取得したい場合はこれで差し支えないでしょう。

しかし、複数の要素を取得して同じ操作をしたい場合、idを1つ1つ指定して同じJavaScriptの記述をするのは面倒なので、そこで「まとめて取得したいな！」となりますよね。

※HTMLのルールで、idはページ内で一意である必要があり、同じid名を複数のタグに指定することはできないのです。

複数の要素をまとめて取得する場合はclassを取得

続いて下部コードの「複数のclassを取得」をご覧ください。

classならidと違い、複数の要素に同じclass名をつけることができますね。

JavaScriptでclassを取得する場合は、「querySelectorAll」を使用します。

text2クラスを2つのpタグに指定し、クリックしたらテキストが赤くなる記述をしています。

しかし、1つの要素を取得するのと同じ要領で書いても、JavaScriptが動きません。

JavaScriptで複数の要素を取得する場合は繰り返し処理をする

動かない原因は、同じclass名を指定した複数の要素をまとめて取得したい場合、forEachで繰り返し処理の記述をする必要があるからです。

See the Pen jsで複数の同一クラスを取得(forEach) by spiqa design (@spiqa_design) on CodePen.

「value」に複数の要素を1つ1つセットして、繰り返し処理を加えることで全てのtextクラスで「クリックしてテキストを赤くする」というスクリプトを実装することができました。

「value」は用意された入れ物なので、名前は何でもOKです。

この記述をコールバック関数といいますが、くわしくは以下サイトをご参考ください。

https://www.javadrive.jp/javascript/array/index10.html

for文でのコードも書いてみました。
記述内容はどちらも同じなので、好きな方をご活用ください。

See the Pen jsで複数の同一クラスを取得(for) by spiqa design (@spiqa_design) on CodePen.

JavaScriptで複数要素を取得する方法のまとめ

• JavaScriptで1つの要素を取得する場合は「getElementById」が基本
• JavaScriptで複数の要素を取得する場合は「querySelectorAll」を使用
• 複数の要素を取得する場合は繰り返し処理を行う

今回はJavaScriptで複数の要素を取得する方法についてご紹介しました。

1つの要素を取得するのと同じ要領で実装しようするとつまづくので要注意ですね！

ちなみに、jQueryで同様の記述を書けば、JavaScript素書きよりもかなり簡単な記述で済みますので、次回はそちらを紹介したいと思います。