Maison  >  Article  >  interface Web  >  Comment faire la différence entre les objets DOM et les objets JavaScript ?

Comment faire la différence entre les objets DOM et les objets JavaScript ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-10-26 19:52:29969parcourir

 How to Tell the Difference Between DOM Objects and JavaScript Objects?

Comment différencier les objets DOM des objets JavaScript

Lorsque vous travaillez avec JavaScript, il peut être crucial de faire la distinction entre les objets DOM et les objets JavaScript. Les objets DOM sont souvent liés aux éléments et attributs d'une page Web, tandis que les objets JavaScript sont plus abstraits.

Pour effectuer efficacement cette différenciation, il est possible d'utiliser l'opérateur instanceof. Cet opérateur peut être appliqué pour confirmer si un objet appartient à une classe spécifique ou en a hérité.

Voici un exemple démontrant son utilisation :

<code class="javascript">function isElement(obj) {
  try {
    // Using W3 DOM2 (compatible with FF, Opera, and Chrome)
    return obj instanceof HTMLElement;
  } catch (e) {
    // For browsers that don't support W3 DOM2 (like IE7)
    return (
      typeof obj === "object" &&
      obj.nodeType === 1 &&
      typeof obj.style === "object" &&
      typeof obj.ownerDocument === "object"
    );
  }
}</code>

Alternativement, une méthode plus complète pour implémenter cette différenciation se fait en introduisant une nouvelle fonction, isNode(), qui valide si un objet est un nœud DOM :

<code class="javascript">function isNode(o) {
  return (
    typeof Node === "object" ? o instanceof Node :
    o &&
    typeof o === "object" &&
    typeof o.nodeType === "number" &&
    typeof o.nodeName === "string"
  );
}</code>

Avec cette fonction en place, la fonction isElement() peut être modifiée pour vérifier le DOM éléments exclusivement :

<code class="javascript">function isElement(o) {
  return (
    typeof HTMLElement === "object" ? o instanceof HTMLElement : // DOM2
    o &&
    typeof o === "object" &&
    o !== null &&
    o.nodeType === 1 &&
    typeof o.nodeName === "string"
  );
}</code>

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn