JavaScriptで要素のタイプ判定

JavaScriptでHTML要素のタイプを判定する方法

HTML要素のタイプを判定するとは、JavaScriptで特定のHTML要素がどのような種類のものかを調べることを指します。例えば、ボタンなのか、テキストボックスなのか、画像なのかなどを確認することができます。

tagNameプロパティを使用する

最も直接的な方法は、HTML要素のtagNameプロパティを使用することです。これは要素の名前を表す文字列を返します。

const element = document.getElementById('myElement');
console.log(element.tagName); // 例えば、"BUTTON"や"INPUT"

nodeTypeプロパティを使用する

nodeTypeプロパティは、要素のノードタイプを表す数値を返します。HTML要素はノードタイプ1を持ちます。

const element = document.getElementById('myElement');
if (element.nodeType === 1) {
  console.log('これはHTML要素です');
}

nodeNameプロパティは、要素の名前を表す文字列を返します。tagNameプロパティと似ていますが、大文字で返されます。

const element = document.getElementById('myElement');
console.log(element.nodeName); // 例えば、"BUTTON"や"INPUT"

typeof演算子を使用する

要素のタイプを文字列で取得するには、typeof演算子を使用できます。HTML要素の場合、"object"が返されます。

const element = document.getElementById('myElement');
console.log(typeof element); // "object"

instanceof演算子を使用する

特定のHTML要素クラスであるかどうかを確認するには、instanceof演算子を使用できます。

const element = document.getElementById('myElement');
if (element instanceof HTMLButtonElement) {
  console.log('これはボタン要素です');
}

例

<button id="myButton">ボタン</button>
<input type="text" id="myInput">

const button = document.getElementById('myButton');
const input = document.getElementById('myInput');

console.log(button.tagName); // "BUTTON"
console.log(input.tagName); // "INPUT"

console.log(button.nodeType); // 1
console.log(input.nodeType); // 1

console.log(button.nodeName); // "BUTTON"
console.log(input.nodeName); // "INPUT"

console.log(typeof button); // "object"
console.log(typeof input); // "object"

console.log(button instanceof HTMLButtonElement); // true
console.log(input instanceof HTMLInputElement); // true

JavaScriptで要素のタイプ判定の例

HTML要素のタイプを判定するためのJavaScriptコードの例を解説します。

const element = document.getElementById('myElement');
console.log(element.tagName); // 例えば、"BUTTON"や"INPUT"

• element.tagNameで要素の名前を取得し、コンソールに出力します。
• document.getElementById('myElement')でIDが"myElement"の要素を取得します。

const element = document.getElementById('myElement');
if (element.nodeType === 1) {
  console.log('これはHTML要素です');
}

• HTML要素はノードタイプ1なので、=== 1で比較して、HTML要素かどうかを判定します。
• element.nodeTypeで要素のノードタイプを取得します。

const element = document.getElementById('myElement');
console.log(element.nodeName); // 例えば、"BUTTON"や"INPUT"

• element.nodeNameで要素の名前を取得し、コンソールに出力します。tagNameプロパティと似ていますが、大文字で返されます。

const element = document.getElementById('myElement');
console.log(typeof element); // "object"

• typeof elementで要素のタイプを取得し、コンソールに出力します。HTML要素の場合、"object"が返されます。

const element = document.getElementById('myElement');
if (element instanceof HTMLButtonElement) {
  console.log('これはボタン要素です');
}

• element instanceof HTMLButtonElementで要素がHTMLButtonElementクラスのインスタンスかどうかを判定します。

<button id="myButton">ボタン</button>
<input type="text" id="myInput">

const button = document.getElementById('myButton');
const input = document.getElementById('myInput');

console.log(button.tagName); // "BUTTON"
console.log(input.tagName); // "INPUT"

console.log(button.nodeType); // 1
console.log(input.nodeType); // 1

console.log(button.nodeName); // "BUTTON"
console.log(input.nodeName); // "INPUT"

console.log(typeof button); // "object"
console.log(typeof input); // "object"

console.log(button instanceof HTMLButtonElement); // true
console.log(input instanceof HTMLInputElement); // true

CSSセレクターを使用する

CSSセレクターを使用して、特定の要素タイプを直接選択することができます。

const buttons = document.querySelectorAll('button');
console.log(buttons); // ボタン要素のリスト

classListプロパティを使用する

要素にクラス名が設定されている場合、classListプロパティを使用してクラス名をチェックすることができます。

const element = document.getElementById('myElement');
if (element.classList.contains('button')) {
  console.log('これはボタン要素です');
}

カスタム属性を使用する

要素にカスタム属性を設定し、その属性値に基づいてタイプを判定することができます。

<button data-type="button">ボタン</button>
<input data-type="input">

const element = document.getElementById('myElement');
const type = element.getAttribute('data-type');
console.log(type); // "button"または"input"

matches()メソッドを使用する

matches()メソッドを使用して、要素が特定のCSSセレクターにマッチするかを判定することができます。

const element = document.getElementById('myElement');
if (element.matches('button')) {
  console.log('これはボタン要素です');
}

is()メソッドを使用する

is()メソッドを使用して、要素が特定のHTML要素タイプであるかどうかを判定することができます。

const element = document.getElementById('myElement');
if (element.is('button')) {
  console.log('これはボタン要素です');
}

<button id="myButton" class="button">ボタン</button>
<input type="text" id="myInput" class="input">

const buttons = document.querySelectorAll('button');
console.log(buttons); // ボタン要素のリスト

const element = document.getElementById('myElement');
if (element.classList.contains('button')) {
  console.log('これはボタン要素です');
}

const type = element.getAttribute('data-type');
console.log(type); // "button"または"input"

if (element.matches('button')) {
  console.log('これはボタン要素です');
}

if (element.is('button')) {
  console.log('これはボタン要素です');
}