HTML DOMのtagNameプロパティとは？要素のタグ名を取得する方法を解説
HTML DOMのtagNameプロパティは、HTMLドキュメント内の指定した要素のタグ名（要素名）を文字列として返します。JavaScriptで要素の種類を判別したり、動的に処理を分岐させたりする際に役立つ基本的なプロパティです。
構文
tagNameプロパティの基本的な構文は以下の通りです。
element.tagName
押さえておきたいポイント
- HTMLドキュメントの場合：tagNameは常に大文字で返されます（例：<div>なら「DIV」）。
- XMLドキュメントの場合：ソースコードに記述された元の大文字・小文字がそのまま保持されます。
- nodeNameとの違い：nodeNameはあらゆるノードで使用できますが、tagNameは要素ノード専用です。
サンプルコード
それでは、実際にtagNameプロパティを使った具体例を見てみましょう。以下のコードでは、ボタンをクリックするとそのボタンのタグ名が画面に表示されます。
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
</head>
<body>
<h1>HTML DOM tagName Property Demo</h1>
<button class="btn" onclick="display()">Click me to show my tag name</button>
<div class="show"></div>
<script>
function display() {
document.querySelector('.show').innerHTML = 'Tag name is: ' + document.querySelector('button').tagName;
}
</script>
</body>
</html>
実行結果
ブラウザでページを開くと、オレンジから黄色へのグラデーション背景の中央に、次のような赤いボタンが表示されます。
ここで「Click me to show my tag name」ボタンをクリックしてみましょう。すると、赤いボタンのタグ名が取得され、下の領域に「Tag name is: BUTTON」という結果が表示されます。
まとめ
tagNameプロパティを使えば、たった一行のコードで要素のタグ名を簡単に取得できます。HTMLでは結果が大文字で返される点に注意しながら、条件分岐やデバッグなど、さまざまな場面で活用してみてください。
-
【初心者向け】HTML DOMのoffsetParentプロパティの使い方とサンプルコード
offsetParentプロパティとは HTML DOM の offsetParent プロパティは、対象要素のオフセット（相対的な位置）がどの親要素を基準として定義されているかを示し、その基準となる親要素への参照を返します。 具体的には、CSS の position プロパティ（relative / absolute / fixed / sticky）が指定された最も近い祖先要素が基準となります。該当する要素が存在しない場合は <body> 要素が返されます。また、テーブルセル内の要素であれば <td> や <table> などのテーブル関連要素が基準にな
-
HTML DOM titleプロパティとは？使い方とサンプルコードを解説
HTML DOM titleプロパティとはHTML DOMのtitleプロパティは、HTML要素のtitle属性に対応する文字列を取得（戻り値として返す）したり、設定したりするためのプロパティです。title属性に値が設定されている場合、その要素にマウスカーソルを重ねると、ツールチップとしてテキストが表示されます。この動的な挙動をJavaScriptから制御できるのが、titleプロパティの役割です。構文title属性の値を取得する場合：ElementOfHTMLObject.titletitle属性に文字列を設定する場合：ElementOfHTMLObject.title = string使