Comment déterminer l'état d'un objet DOM en JavaScript

En JavaScript, la distinction entre les objets DOM (Document Object Model) et les objets JavaScript classiques est cruciale pour certaines opérations. Bien que l'approche traditionnelle consistant à vérifier la propriété tagName fonctionne dans la plupart des cas, elle peut échouer dans certains navigateurs qui n'appliquent pas les propriétés en lecture seule.

Une solution complète

Pour résoudre ce problème, considérez la fonction suivante :

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'
    );
  }
}

Ce code exploite W3 DOM2 pour les navigateurs pris en charge et vérifie les propriétés spécifiques dans les navigateurs non-DOM2.

Options supplémentaires

Une autre approche consiste à utilisez le code suivant :

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';
}

Ce code fait la distinction entre les nœuds et les éléments DOM, en traitant des différences potentielles dans les implémentations des navigateurs.