【JavaScript】要素のタグ名を取得する

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

本記事では、JavaScriptで要素のタグ名を取得する方法をご紹介しています。

JavaScriptで要素のタグ名を取得したいんだけど、どうするんだろう?

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

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

tagNameで要素のタグ名を取得する

JavaScriptで要素のタグ名を取得にはelementtagNameプロパティを使用します。tagNameはそのまま要素のタグ名を返すプロパティです。

tagNameプロパティは、下記のように使用します。

HTML

<div id="target">Element</div>

JavaScript

const target = document.getElementById('target')
console.log(target.tagName)

実行すると、大文字のタグ名を返します。

DIV

もし小文字のタグ名が必要な場合はtoLowerCase()で小文字に変換します。

JavaScript

const target = document.getElementById('target')
console.log(target.tagName.toLowerCase())

実行すると、下記のように小文字のタグ名を取得することができます。

div

イベントターゲット要素のタグ名を取得する

tagNameプロパティを使用して、イベントターゲット(event.target)になっている要素のタグ名を取得します。

HTML

<button id="target">Click Me!</button>

JavaScript

const target = document.getElementById('target')

target.addEventListener('click', (e)=> {
    alert(e.target.tagName)
}, false)

下記にデモをご用意しました。実際にボタンをクリックして、アラートにタグ名が表示されるのを確認してみてくださいね。

See the Pen by ryohei (@intotheprogram) on CodePen.

最後に

JavaScriptでタグ名を取得して何らかの処理をするというのは、フォームやコンテンツの操作等で使用する場面が多い印象です。要素のタグ名はtagNameで取得する!これだけ頭に入れておけば検索時間の短縮につながりますので、覚えておくと良いかもしれませんね。

以上、JavaScriptで要素のタグ名を取得する方法のご紹介でした!

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

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

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍