[JavaScript]getElementsByClassNameで取得した要素にイベントハンドラを設定する方法

はじめに

本記事はJavaScript初学者が学習記録を残す目的で書いてます｡記載の内容に誤りなどあればご指摘いただけると幸いです｡

本記事を読むことでわかること

getElementsByClassNameで取得した各要素にイベントハンドラを設定できるようになります｡

本題

以下のようなHTMLのコードがあるとします｡

  <a href="javascript:void(0);" class="slide-menu">
    <span class="text">メニュー1</span>
  </a>
  <a href="javascript:void(0);" class="slide-menu">
    <span class="text">メニュー2</span>
  </a>

class="slide-menu"が設定されたa要素のクリックに対しイベントハンドラを設定したいとします｡要素が複数あるため､getElementsByClassNameで指定したクラス名を持つ要素を取得します｡

const menuButtons = document.getElementsByClassName('slide-menu');

このgetElementsByClassNameは､取得した要素を HTMLCollectionという配列と似たデータで返します｡ そのため以下記載するコードのように HTMLCollectionをforEachで回せば､ひとつひとつの要素に対しイベントハンドラが設定できるのでは考えました｡

const menuButtons = document.getElementsByClassName('slide-menu');
menuButtons.forEach((menuButton) => {
  menuButton.addEventListener('click', () => {
    // イベント発生時の処理
  })
});

ですが上記コードはうまくいきません｡理由はHTMLCollectionにforEachは使用できないためです｡HTMLCollectionは配列に似ているだけで配列とは別のデータ型なんですね｡

HTMLCollectionをforEachしたい場合､どうすればいいでしょうか｡結論､Array.from()メソッドでHTMLCollectionを配列に変換すればOKです｡

const menuButtons = document.getElementsByClassName('slide-menu');
Array.from(menuButtons).forEach((menuButton) => {
  menuButton.addEventListener('click', () => {
    // イベント発生時の処理
  })
});

このように書くことで､getElementsByClassNameで取得した各要素に対しイベントハンドラを設定可能です｡

以上､ここまでご覧いただきありがとうございました｡