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

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

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

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

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

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

JavaScriptで要素のタグ名を取得にはelementのtagNameプロパティを使用します。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で要素のタグ名を取得する方法のご紹介でした！