JavaScript | 要素のclassからidを取得する方法
JavaScriptを使ってクリック時などに要素のclassからidを取得する方法です。
クリック時・マウスホバー時・ドラッグ時などのパターンを紹介しています。
要素のクリック時にclassからidを取得する
JavaScriptを使って要素のクリック時にclassからidを取得するサンプルコードです。
See the Pen JavaScript click on class to get id by yochans (@yochans) on CodePen.
addEventListener()のクリックイベント時に引数を指定して要素の情報を取得し、要素に定義されているid名を取得します。
HTMLにはクラス名targetを指定した要素を3つ作成し、各要素に「a」「b」「c」というid名を指定しています。
<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>jqueryであれば、短く記述可能ですがJavaScriptの場合は、ループ処理を使って同じclass名を持つ要素毎にaddEventListener()()を定義します。
addEventListener()()発火時に要素の情報を取得するため、「event」という変数を利用します。
クリックされた要素のid名を取得はevent.target.idで可能です。
また、対象の要素にid名が複数定義されている場合は、event.target.id[0]、event.target.id[1]と配列として取得する事が可能です。
サンプルではログ表示用に「log」というidのp要素にinnerHTMLを使ってクリックした要素のid名を表示しています。
// tagetclassグループで指定
const target = document.querySelectorAll('.target');
// for分で要素数分ループ処理
for (let i = 0; i < target.length; i++) {
//クリックイベントを追加
target[i].addEventListener('click', () => {
// idを取得してログに出力する
document.querySelector('#log').innerHTML = event.target.id + `をクリックしました。`;
}, false);
}要素のマウスホバー時にclassからidを取得する
JavaScriptを使って要素のマウスホバー時にclassからidを取得するサンプルコードです。
addEventListener()のマウスホバーイベント時に引数を指定して要素の情報を取得し、要素に定義されているid名を取得します。
See the Pen JavaScript hover on class to get id by yochans (@yochans) on CodePen.
<div class="target_class" id="a">a</div>
<div class="target_class" id="b">b</div>
<div class="target_class" id="c">c</div>
<p id="log"></p>addEventListener()でマウスホバーイベント発火時に要素の情報を取得するには変数「event」を利用します。
マウスホバーされた要素のid名を取得はevent.target.idで可能です。
また、対象の要素にid名が複数定義されている場合は、event.target.id[0]、event.target.id[1]と配列として取得する事が可能です。
// tagetclassグループで指定
const target = document.querySelectorAll('.target_class');
//for分で要素数分ループ処理
for (let i = 0; i < target.length; i++) {
// マウスホバーイベントを追加
target[i].addEventListener('mouseover', () => {
// idを取得してログに出力する
document.querySelector('#log').innerHTML = event.target.id + `をマウスホバーしています。`;
}, false);
}