JavaScriptで押されたボタンのid名を取得する方法！
WEB制作やフロントエンド開発において、JavaScriptでDOM操作を行う技術は必須と言えます。DOM操作を行う際にHTML要素にid属性を設定し、JavaScriptでその要素を取得する方法がよく用いられる手法の１つです。その方法について解説しています。
JavaScriptで押されたボタンのid名を取得する方法
今回「JavaScriptで押されたボタンのid名を取得する方法」を紹介していきたいと思います。
押されたボタンのid名を取得することで、押されたボタンを一意に認識し、押されたボタンに応じた処理を実行するなど様々な機能を実現することができます。
WEB制作やフロンドエンド開発ではほぼ必須といってもよい機能なので、しっかり実装していけるようになりましょう。
idとは
idとはHTMLのタグに設定できる属性の１つです。
class属性は同じ名前を複数の要素に設定できますが、id属性は1つのページで同じ名前のidは１つの要素にしか設定できません。
そのため、このルールに則ってコーディングされたものであれば、id属性を特定することで唯一のHTML要素を特定することができます。
getElementByIdメソッド
getElementByIdメソッドは、HTMLで指定した任意のid名の文字列を引数として渡してあげることで、そのHTML要素を取得することができるメソッドです。
上記で述べたように１つのHTMLファイル内で指定したid名の要素は１つしか存在しないため、特定の要素を一意に取得することができます。
JavaScriptでid名を取得してみよう
それでは実際に押したボタンのid名を取得してみましょう。
CSSで指定しているスタイルにはご自身で好きなものに変更して構いません。
記載しているスタイルシートでは見た目をボタンっぽく仕上げていますので、ぜひサンプルコードを参考にしてみてください。
HTMLファイルのコードを見ると分かるように、div要素にid属性で「button」を指定しています。
このdiv要素が押された際に「button」というid名をJavaScriptで取得していきます。
index.js
'use strict';
// 押したボタンのid名取得
document.getElementById('button').addEventListener('click', function(){
alert('id名「' + this.id + '」のボタンを押しました。');
});上記のコードにより、div要素がクリックされた際にそのid名をアラートで表示するような動きになります。
まず、document.getElementById('button')の部分でdocumentオブジェクトに対して引数にid属性を指定したgetElementByIdメソッドにより「button」要素を取得します。
その要素に対して第一引数に「click」を指定したaddEventListenerメソッドでクリックイベントを用意しています。
また、第二引数でクリックイベントが発火した際の実際の処理を記述しています。
実際の処理の部分ではアラートを表示する記述を書いています。
thisではイベントが発生したその要素自身を取得することができます。そのthis要素にidプロパティを指定することでクリックされた要素のid名を取得することができます。
これでJavaScriptで押されたボタンのid名を取得することができました。
まとめ
今回はid名を取得するだけでしたが、JavaScriptでHTML要素の情報取得して、扱えるようになれば表現の幅が広がり、もっと複雑な処理を実装することもできるようになるでしょう。
