【javascript】複数の要素にイベントを仕込みたい

同じclassを持つ要素に同じクリックイベントを仕込みたかったんだけどjavascriptのやり方がわからなかったので備忘録

javascriptで複数の要素にイベントを仕込む方法

querySelectorAll()で同名の要素を取得し、
forEach()でループ処理し個々にイベントを指定していきます

<div class="btn">ボタン１</div>
  <div class="btn">ボタン２</div>
  
  <script>
  var elements = document.querySelectorAll(".btn");// NodeListとして取得
  elements.forEach(elm => {
    elm.addEventListener('click', function(){
      alert(this.textContent + "が押されました！");
    });
  });
  </script>

querySelectorAllで取得できる要素はNodeListだから何も考えずループ文で取得できるけど
getElementsByClassNameで取得するとHTMLCollectionという配列もどきで取得することになり、Array.from()などで配列にしてからじゃないとループ処理で中身を取得できないので注意