JavaScriptでinstanceof演算子を使ってDOM要素かどうかを判定する

JavaScriptオブジェクトがDOMオブジェクトかどうかを確認する方法

instanceof 演算子を使用する

最も簡単な方法は、instanceof 演算子を使用することです。

// オブジェクトが HTMLElement のインスタンスかどうかを確認
if (obj instanceof HTMLElement) {
  // obj は DOM オブジェクトです
} else {
  // obj は DOM オブジェクトではありません
}

instanceof 演算子は、オブジェクトが特定のコンストラクタのインスタンスかどうかを判定します。上記の例では、obj が HTMLElement コンストラクタのインスタンスかどうかをチェックしています。

nodeType プロパティを使用する

DOM要素には、nodeType というプロパティがあります。このプロパティは、要素の種類を表す数値を返します。

// オブジェクトが DOM 要素かどうかを確認
if (obj.nodeType === Node.ELEMENT_NODE) {
  // obj は DOM 要素です
} else {
  // obj は DOM 要素ではありません
}

上記の例では、obj の nodeType プロパティが Node.ELEMENT_NODE に等しいかどうかをチェックしています。Node.ELEMENT_NODE は、要素がDOM要素であることを示します。

Node オブジェクトのメソッドを使用する

Node オブジェクトには、hasChildNodes() や appendChild() などのメソッドがあります。これらのメソッドは、DOM要素でのみ使用できます。

// オブジェクトが DOM 要素かどうかを確認
if (obj.hasChildNodes()) {
  // obj は DOM 要素です
} else {
  // obj は DOM 要素ではありません
}

上記の例では、obj が hasChildNodes() メソッドを持っているかどうかをチェックしています。hasChildNodes() メソッドは、要素に子要素があるかどうかを判定します。

Node オブジェクトのプロパティを使用する

Node オブジェクトには、nodeName や nodeValue などのプロパティがあります。これらのプロパティは、DOM要素でのみ使用できます。

// オブジェクトが DOM 要素かどうかを確認
if (obj.nodeName === "DIV") {
  // obj は DOM 要素です
} else {
  // obj は DOM 要素ではありません
}

上記の例では、obj の nodeName プロパティが "DIV" に等しいかどうかをチェックしています。nodeName プロパティは、要素の名前を返します。

ライブラリを使用する

jQueryなどのライブラリを使用すると、DOMオブジェクトかどうかを簡単に確認できます。

// jQueryを使用して、objがDOM要素かどうかを確認
if (jQuery.isPlainObject(obj)) {
  // obj は DOM オブジェクトではありません
} else {
  // obj は DOM オブジェクトです
}

上記の例では、jQueryを使用して obj がプレーンオブジェクトかどうかをチェックしています。プレーンオブジェクトは、DOMオブジェクトではありません。

JavaScriptオブジェクトがDOMオブジェクトかどうかを確認するには、いくつかの方法があります。どの方法を使用するかは、状況によって異なります。

補足

• instanceof 演算子は、最も簡単な方法ですが、すべてのブラウザでサポートされているわけではありません。
• nodeType プロパティを使用する方法は、すべてのブラウザでサポートされていますが、IE8では nodeType プロパティが正しく動作しない場合があります。
• Node オブジェクトのメソッドやプロパティを使用する方法は、すべてのブラウザでサポートされていますが、DOM要素以外のオブジェクトでもこれらのメソッドやプロパティを持っている場合があります。
• ライブラリを使用する方法は、最も簡単に使用できますが、ライブラリを別途読み込む必要があります。

// オブジェクトが DOM 要素かどうかを確認する関数
function isDomElement(obj) {
  // instanceof 演算子を使用する
  if (obj instanceof HTMLElement) {
    return true;
  }

  // nodeType プロパティを使用する
  if (obj.nodeType === Node.ELEMENT_NODE) {
    return true;
  }

  // Node オブジェクトのメソッドを使用する
  if (obj.hasChildNodes()) {
    return true;
  }

  // Node オブジェクトのプロパティを使用する
  if (obj.nodeName) {
    return true;
  }

  // ライブラリを使用する (jQuery)
  if (jQuery && jQuery.isPlainObject(obj)) {
    return false;
  }

  return false;
}

// 例
const obj1 = document.getElementById("my-element");
const obj2 = { name: "John Doe" };

console.log(isDomElement(obj1)); // true
console.log(isDomElement(obj2)); // false

例では、getElementById() メソッドを使用して取得したDOM要素と、プレーンオブジェクトを作成しています。そして、isDomElement() 関数を使用して、それぞれのオブジェクトがDOM要素かどうかを確認しています。

JavaScriptオブジェクトがDOMオブジェクトかどうかを確認する他の方法

tagName プロパティを使用する

// オブジェクトが DOM 要素かどうかを確認
if (obj.tagName) {
  // obj は DOM 要素です
} else {
  // obj は DOM 要素ではありません
}

上記の例では、obj の tagName プロパティが存在するかどうかをチェックしています。

ownerDocument プロパティを使用する

DOM要素には、ownerDocument プロパティがあります。このプロパティは、要素が属するドキュメントオブジェクトを返します。

// オブジェクトが DOM 要素かどうかを確認
if (obj.ownerDocument) {
  // obj は DOM 要素です
} else {
  // obj は DOM 要素ではありません
}

// オブジェクトが DOM 要素かどうかを確認
if (obj.parentNode) {
  // obj は DOM 要素です
} else {
  // obj は DOM 要素ではありません
}

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

DOM要素には、getBoundingClientRect() メソッドがあります。このメソッドは、要素の座標とサイズを表すオブジェクトを返します。

// オブジェクトが DOM 要素かどうかを確認
if (obj.getBoundingClientRect) {
  // obj は DOM 要素です
} else {
  // obj は DOM 要素ではありません
}

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

DOM要素には、addEventListener() メソッドがあります。このメソッドは、要素にイベントリスナーを追加します。

// オブジェクトが DOM 要素かどうかを確認
try {
  obj.addEventListener("click", function() {});
  // obj は DOM 要素です
} catch (e) {
  // obj は DOM 要素ではありません
}

上記の例では、obj に click イベントリスナーを追加できるかどうかをチェックしています。

補足

• 上記の方法の中には、すべてのブラウザでサポートされていないものもあります。
• いくつかの方法を組み合わせて使用することで、より確実に判定することができます。