【JavaScript】要素のid属性の値を取得する
※本ページのリンクにはプロモーションが含まれています。
こんにちは、Ryohei（@ityryohei）です！
本記事では、JavaScriptで要素のid属性に設定されている値を取得する方法をご紹介しています。
JavaScriptで要素のid属性の値を取得するには、どうすればいいんだろう？
上記の疑問にお答えします。
では、解説していきます。要素のidの値を取得する方法
JavaScriptで要素のid属性の値は、下記の方法で取得することができます。
- idプロパティで取得する
- getAttributeメソッド取得する
それぞれ詳しくご紹介していきます。
idプロパティで要素のid属性の値を取得する
Elementのidプロパティで要素のidの値を取得します。id属性に値が設定されている場合は値の文字列を返します。
HTML
<div id="app">
<h1>Title Text</h1>
</div>
JavaScript
const element = document.getElementById('app');
console.log(element.id);
実行すると、コンソールにappの文字列が出力されます。Elementのidプロパティで要素のid属性に設定されている値が取得できていることが確認できます。
getAttributeメソッドで要素のid属性の値を取得する
getAttributeメソッドは、要素の属性名を指定して値を取得することができるメソッドです。実行時にid属性を指定することで、id属性の値を取得することができます。
HTML
<div id="app">
<h1>Title Text</h1>
</div>
JavaScript
const element = document.getElementById('app');
console.log(element.getAttribute('id'));
実行すると、コンソールにappの文字列が出力されます。getAttributeメソッドで要素のid属性に設定されている値が取得できていることが確認できます。
最後に
最近はJavaScriptスクリプトを組んでいたため、しばらくjQueryを触っていなかったのですが、先日とある案件にて久しぶりにjQueryでスクリプトを組む機会がありました。
すっかり忘れてるんだろうな…
と思ったわけですが、約3年間毎日にようにjQueryを触っていた経験は伊達ではないらしく、いざ入力を始めるとスラスラとjQueryの構文が浮かんできて、ドキュメント等を見ることなく最後まで組むことができました。努力と経験は自分を裏切らないんだな、と実感し、過去の自分を褒めてあげました。
プログラミングに限らず、何事にもこれを続けて意味があるのかな、と考える瞬間はあると思いますが、将来的にその経験が活きる場面が訪れます。無駄な努力はないはずなので、興味があることにとことん向き合い、その努力が結果という形で実を結んだときは、回りがドン引きするくらい自分を褒めてあげてくださいね。
以上、JavaScriptで要素のid属性の値を取得する方法のご紹介でした！
