JavaScript で DOM オブジェクトのステータスを確認する方法

JavaScript では、DOM (Document Object Model) オブジェクトと通常の JavaScript オブジェクトを区別することが重要です特定の操作用。 tagName プロパティをチェックする従来のアプローチはほとんどの場合機能しますが、読み取り専用プロパティを強制していない一部のブラウザでは失敗する可能性があります。

包括的なソリューション

]この問題に対処するには、次の関数を検討してください:

function isElement(obj) {
  try {
    // W3 DOM2 (works for FF, Opera, and Chrome)
    return obj instanceof HTMLElement;
  } catch (e) {
    // Non-DOM2 browsers
    return (
      typeof obj === 'object' &&
      obj.nodeType === 1 &&
      typeof obj.style === 'object' &&
      typeof obj.ownerDocument === 'object'
    );
  }
}

このコードは、サポートされているブラウザでは W3 DOM2 を利用し、DOM2 以外のブラウザでは特定のプロパティをチェックします。

追加オプション

別のアプローチは次のとおりです。次のコードを使用します:

function isNode(o) {
  return typeof Node === 'object'
    ? o instanceof Node
    : o &&
        typeof o === 'object' &&
        typeof o.nodeType === 'number' &&
        typeof o.nodeName === 'string';
}

function isElement(o) {
  return typeof HTMLElement === 'object'
    ? o instanceof HTMLElement
    : o &&
        typeof o === 'object' &&
        o !== null &&
        o.nodeType === 1 &&
        typeof o.nodeName === 'string';
}

このコードは DOM ノードと要素を区別し、ブラウザ実装の潜在的な違いに対処します。