【JavaScript】要素のid属性の値を取得する

こんにちは、Ryohei（@ityryohei）です！

本記事では、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属性に設定されている値が取得できていることが確認できます。

参考：https://developer.mozilla.org/ja/docs/Web/API/Element/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属性に設定されている値が取得できていることが確認できます。

参考：https://developer.mozilla.org/ja/docs/Web/API/Element/getAttribute

最後に

最近はJavaScriptスクリプトを組んでいたため、しばらくjQueryを触っていなかったのですが、先日とある案件にて久しぶりにjQueryでスクリプトを組む機会がありました。

すっかり忘れてるんだろうな…

と思ったわけですが、約3年間毎日にようにjQueryを触っていた経験は伊達ではないらしく、いざ入力を始めるとスラスラとjQueryの構文が浮かんできて、ドキュメント等を見ることなく最後まで組むことができました。努力と経験は自分を裏切らないんだな、と実感し、過去の自分を褒めてあげました。

プログラミングに限らず、何事にもこれを続けて意味があるのかな、と考える瞬間はあると思いますが、将来的にその経験が活きる場面が訪れます。無駄な努力はないはずなので、興味があることにとことん向き合い、その努力が結果という形で実を結んだときは、回りがドン引きするくらい自分を褒めてあげてくださいね。

以上、JavaScriptで要素のid属性の値を取得する方法のご紹介でした！