getAttribute()メソッドを使って要素の種類を判定する

2024-04-08

JavaScriptでHTML要素の種類を判定する方法

nodeType プロパティを使う

方法

nodeType プロパティは、要素の種類を表す数値を返します。
以下の表に、各数値が表す要素の種類を示します。

数値	要素の種類
1	要素ノード
2	属性ノード
3	テキストノード
4	コメントノード
5	エンティティ参照ノード
6	処理命令ノード
7	ドキュメントノード
8	ドキュメントフラグメントノード
9	要素ノード (SVG)
10	要素ノード (MathML)
11	要素ノード (HTML)
12	要素ノード (XHTML)

例

const element = document.getElementById("my-element");

if (element.nodeType === 1) {
  // 要素ノードの場合
} else if (element.nodeType === 3) {
  // テキストノードの場合
} else {
  // その他の種類のノードの場合
}

nodeName プロパティを使う

要素の名前は、大文字と小文字を区別する必要があります。

const element = document.getElementById("my-element");

if (element.nodeName === "DIV") {
  // div 要素の場合
} else if (element.nodeName === "SPAN") {
  // span 要素の場合
} else {
  // その他の種類の要素の場合
}

instanceof 演算子を使う

instanceof 演算子は、オブジェクトが特定のクラスのインスタンスであるかどうかを判定します。
HTML要素は、それぞれ固有のクラスを持ちます。

const element = document.getElementById("my-element");

if (element instanceof HTMLElement) {
  // HTML要素の場合
} else if (element instanceof SVGElement) {
  // SVG要素の場合
} else {
  // その他の種類の要素の場合
}

tagName プロパティを使う

nodeName プロパティと異なり、tagName プロパティは大文字小文字を区別しません。

const element = document.getElementById("my-element");

if (element.tagName === "div") {
  // div 要素の場合
} else if (element.tagName === "span") {
  // span 要素の場合
} else {
  // その他の種類の要素の場合
}

.is() メソッドを使う

jQuery ライブラリを使用している場合は、.is() メソッドを使って要素の種類を判定できます。

const element = $("#my-element");

if (element.is("div")) {
  // div 要素の場合
} else if (element.is("span")) {
  // span 要素の場合
} else {
  // その他の種類の要素の場合
}

以上、JavaScriptでHTML要素の種類を判定する方法を紹介しました。

要素の種類を数値で判定したい場合は、nodeType プロパティを使う。
要素の名前を判定したい場合は、nodeName プロパティまたは tagName プロパティを使う。
要素が特定のクラスのインスタンスであるかどうかを判定したい場合は、instanceof 演算子を使う。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
</head>
<body>
  <div id="my-element">
    <h1>タイトル</h1>
    <p>本文</p>
  </div>

  <script>
  const element = document.getElementById("my-element");

  // nodeType プロパティ
  if (element.nodeType === 1) {
    console.log("要素ノードです");
  } else if (element.nodeType === 3) {
    console.log("テキストノードです");
  } else {
    console.log("その他の種類のノードです");
  }

  // nodeName プロパティ
  if (element.nodeName === "DIV") {
    console.log("div 要素です");
  } else if (element.nodeName === "SPAN") {
    console.log("span 要素です");
  } else {
    console.log("その他の種類の要素です");
  }

  // instanceof 演算子
  if (element instanceof HTMLElement) {
    console.log("HTML要素です");
  } else if (element instanceof SVGElement) {
    console.log("SVG要素です");
  } else {
    console.log("その他の種類の要素です");
  }

  // tagName プロパティ
  if (element.tagName === "DIV") {
    console.log("div 要素です");
  } else if (element.tagName === "SPAN") {
    console.log("span 要素です");
  } else {
    console.log("その他の種類の要素です");
  }

  // .is() メソッド
  if (element.is("div")) {
    console.log("div 要素です");
  } else if (element.is("span")) {
    console.log("span 要素です");
  } else {
    console.log("その他の種類の要素です");
  }
  </script>
</body>
</html>

このコードを実行すると、以下の出力がコンソールに表示されます。

要素ノードです
div 要素です
HTML要素です
div 要素です
div 要素です

getAttribute() メソッドを使う

getAttribute() メソッドを使って、要素の属性値を取得できます。
属性値によって、要素の種類を判定できます。

const element = document.getElementById("my-element");

if (element.getAttribute("type") === "button") {
  // ボタン要素の場合
} else if (element.getAttribute("type") === "submit") {
  // 送信ボタン要素の場合
} else {
  // その他の種類の要素の場合
}

classList プロパティを使う

classList プロパティは、要素のクラスリストを取得します。

const element = document.getElementById("my-element");

if (element.classList.contains("active")) {
  // アクティブな要素の場合
} else {
  // 非アクティブな要素の場合
}

.closest() メソッドを使う

.closest() メソッドは、指定されたセレクターに一致する最も近い親要素を取得します。

const element = document.getElementById("my-element");

const closestDiv = element.closest("div");

if (closestDiv) {
  // 最も近い親要素が div 要素の場合
} else {
  // 最も近い親要素が div 要素ではない場合
}

これらの方法は、特定の状況で役立つ場合があります。

JavaScriptでHTML要素の種類を判定するには、さまざまな方法があります。

javascript dom