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

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptで要素のid属性に設定されている値を取得する方法をご紹介しています。

JavaScriptで要素のid属性の値を取得するには、どうすればいいんだろう?

上記の疑問にお答えします。

では、解説していきます。

要素のidの値を取得する方法

JavaScriptで要素のid属性の値は、下記の方法で取得することができます。

  • idプロパティで取得する
  • getAttributeメソッド取得する

それぞれ詳しくご紹介していきます。

idプロパティで要素のid属性の値を取得する

Elementidプロパティで要素のidの値を取得します。id属性に値が設定されている場合は値の文字列を返します。

HTML

<div id="app">
    <h1>Title Text</h1>
</div>

JavaScript

const element = document.getElementById('app');
console.log(element.id);

実行すると、コンソールにappの文字列が出力されます。Elementidプロパティで要素の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属性の値を取得する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍