Comment déterminer de manière fiable si un objet JavaScript est un élément DOM ?

Comment déterminer si un objet JavaScript est un objet DOM

Lorsque vous travaillez avec JavaScript, il est souvent nécessaire de déterminer si un objet représente un élément DOM (Document Object Model). Cette distinction est cruciale pour gérer les interactions des utilisateurs, manipuler les éléments de la page et garantir un bon fonctionnement.

Une approche courante consiste à vérifier si l'objet possède une propriété tagName. Cependant, cette méthode est faillible, car elle suppose que les éléments du DOM possèdent toujours cette propriété. Pour résoudre pleinement ce problème, une solution plus robuste est nécessaire.

Solutions suggérées

Une alternative consiste à exploiter la spécification W3 DOM2, qui fournit l'instance de vérification HTMLElement. Cette approche fonctionne bien dans les navigateurs tels que Firefox, Opera et Chrome.

Pour les navigateurs qui ne prennent pas en charge W3 DOM2, une approche plus complète est recommandée :

function isElement(obj) {
  try {
    return obj instanceof HTMLElement;
  } catch(e) {
    return (typeof obj === "object") &&
      (obj.nodeType === 1) &&
      (typeof obj.style === "object") &&
      (typeof obj.ownerDocument === "object");
  }
}

Ce code teste propriétés communes à tous les éléments DOM, garantissant une détermination fiable.

Implémentations alternatives

Une autre approche consiste à définir des fonctions distinctes pour les nœuds DOM et les éléments DOM :

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

Ces fonctions fournissent un contrôle plus raffiné, répondant aux exigences spécifiques des nœuds et des éléments du DOM.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!