target.tagNameでHTMLのタグ名を取得する

はじめに

JavaScriptでイベント処理を行う際、クリックされた要素のタグ名を取得したい場面は多々あります。この記事では、target.tagNameプロパティを使った基本的な使い方を解説します。

target.tagNameとは

target.tagNameは、イベントが発生した要素のHTMLタグ名を大文字で返すプロパティです。

基本的な使い方

document.addEventListener('click', (event) => {
  console.log(event.target.tagName);
});

このコードを実行すると、クリックした要素のタグ名がコンソールに出力されます。

実践例

例1: 特定のタグだけ処理を行う

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'BUTTON') {
    console.log('ボタンがクリックされました');
  }
});

例2: タグによって処理を分岐

document.addEventListener('click', (event) => {
  switch (event.target.tagName) {
    case 'A':
      console.log('リンクがクリックされました');
      break;
    case 'INPUT':
      console.log('入力欄がクリックされました');
      break;
    case 'DIV':
      console.log('DIV要素がクリックされました');
      break;
    default:
      console.log(`${event.target.tagName}がクリックされました`);
  }
});

注意点

タグ名は大文字で返される

tagNameプロパティは常に大文字で値を返します。そのため、比較する際は大文字で指定する必要があります。

// 正しい
if (event.target.tagName === 'DIV') { }

// 間違い（動作しない）
if (event.target.tagName === 'div') { }

小文字で比較したい場合は、toLowerCase()メソッドを使用します。

if (event.target.tagName.toLowerCase() === 'div') {
  console.log('DIV要素です');
}

カスタム要素の場合

カスタム要素（Custom Elements）の場合も、tagNameでタグ名を取得できます。

// <my-component>というカスタム要素の場合
console.log(event.target.tagName); // "MY-COMPONENT"

まとめ

target.tagNameを使うことで、イベントが発生した要素のタグ名を簡単に取得できます。タグ名による条件分岐を行う際は、大文字で比較することを忘れないようにしましょう。

この機能を活用することで、より柔軟なイベント処理が可能になります。