JavaScriptで要素のclassからidを取得する方法
JavaScriptを使ってクリック時などに要素の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);
}コード説明
addEventListener()でマウスホバーイベント発火時に要素の情報を取得するため、引数に「event」という変数名を用意します。
マウスホバーされた要素のid名を取得は「event.target.id」で可能です。
また、対象の要素にid名が複数定義されている場合は、event.target.id[0]、event.target.id[1]と配列として取得する事が可能です。