【JavaScript】addEventListenerをclass名から利用する方法

2018年3月9日2019年6月12日JavaScript,イベント

「addEventListener」だけに限らないですが「getElementByClassId」のid指定だと動くけど「getElementsByClassName」のclass指定だと動作しない場合

const target = document.getElementByClassId('target');
const targets = document.getElementsByClassName('target');

原因は「getElementByClassId」は単体が返さされますが「getElementsByClassName」はクラス名で得られる子要素すべての配列ライクのオブジェクトを返す、という部分の違いがあるからです

対象がひとつしかなくても「targets[0]」の様に記述する必要があり、複数の要素を対象とする場合はfor文などで要素の数分を定義していきます

動作サンプル

See the Pen JavaScript addEventListener on class by yochans (@yochans) on CodePen.

サンプルコード

HTML

<div class="target">0</div>
<div class="target">1</div>
<div class="target">2</div>

css

.target{
  width:100px;
  height:100px;
  margin:10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #01579B;
  color:#FFF;
  border:solid 1px #000;
}

JavaScript

//tagetclassグループで指定
const targets = document.getElementsByClassName('target');

//for分で要素数分ループ処理
for(let i = 0; i < targets.length; i++){
  
  //クリックイベントでアラートを表示する
  targets[i].addEventListener('click', () => {
        alert(i + `をクリックしました`);
    
}, false);
  
}

※for~inだと要素分プラス「length」「item」「namedItem」の分もループしてしまうので注意