JavaScriptで要素のclassからidを取得する方法

2019-08-25JavaScript取得

JavaScriptを使ってクリック時などに要素のclassからidを取得する方法です。

クリック時・マウスホバー時・ドラッグ時などのパターンを紹介しています。

1. 要素のクリック時にclassからidを取得する方法
2. 要素のマウスホバー時にclassからidを取得する方法

要素のクリック時にclassからidを取得する方法

JavaScriptを使って要素のクリック時にclassからidを取得する方法です。

addEventListener()のクリックイベント時に引数を指定して要素の情報を取得し、要素に定義されているid名を取得します。

動作サンプル

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

サンプルコード

HTML

<div class="target" id="a">a</div>
<div class="target" id="b">b</div>
<div class="target" id="c">c</div>
<p id="log"></p>

HTMLにはクラス名targetを指定した要素を3つ作成し、各要素にa、b、cとidを指定しています。

JavaScript

//tagetclassグループで指定
const target = document.getElementsByClassName('target');
//ログの出力先
const log = document.getElementById('log');

//for分で要素数分ループ処理
for(let i = 0; i < target.length; i++){
  
  //クリックイベントを追加
  target[i].addEventListener('click', (event) => {
    
    //idを取得してログに出力する
    log.innerHTML = event.target.id + `をクリックしました`;
    
  }, false);
  
}

コード説明

jqueryであれば、短く記述可能ですがJavaScriptの場合は、ループ処理を使って同じclass名を持つ要素毎にaddEventListener()を定義します。

addEventListener()発火時に要素の情報を取得するため、引数に「event」という変数名を用意します。

クリックされた要素のid名を取得は「event.target.id」で可能です。

また、対象の要素にid名が複数定義されている場合は、event.target.id[0]、event.target.id[1]と配列として取得する事が可能です。

サンプルではログ表示用にlogというidのp要素にinnerHTMLを使ってクリックした要素のid名を表示しています。

要素のマウスホバー時にclassからidを取得する方法

JavaScriptを使って要素のマウスホバー時にclassからidを取得する方法です。

addEventListener()のマウスホバーイベント時に引数を指定して要素の情報を取得し、要素に定義されているid名を取得します。

動作サンプル

See the Pen JavaScript hover on class to get id by yochans (@yochans) on CodePen.

サンプルコード

HTML

<div class="target" id="a">a</div>
<div class="target" id="b">b</div>
<div class="target" id="c">c</div>
<p id="log"></p>

JavaScript

//tagetclassグループで指定
const target = document.getElementsByClassName('target');
//ログの出力先
const log = document.getElementById('log');

//for分で要素数分ループ処理
for(let i = 0; i < target.length; i++){
  
  //マウスホバーイベントを追加
  target[i].addEventListener('mouseover', (event) => {
    
    //idを取得してログに出力する
    log.innerHTML = event.target.id + `をマウスホバーしています。`;
    
  }, false);
  
}