Propriétés de nœud : type, balise et contenu

Voyons plus en détail les nœuds DOM.

Dans ce chapitre, nous verrons plus en détail ce qu’ils sont et découvrirons leurs propriétés les plus utilisées.

Classes de nœud DOM

Différents nœuds DOM peuvent avoir des propriétés différentes. Par exemple, un nœud élément correspondant à la balise <a> a des propriétés liées aux liens, et celui correspondant à <input> a des propriétés liées aux entrées, etc. Les nœuds texte ne sont pas identiques aux nœuds élément. Mais il existe également des propriétés et des méthodes communes à chacun d’entre eux, car toutes les classes de nœuds DOM forment une hiérarchie unique.

Chaque nœud DOM appartient à la classe intégrée correspondante.

La racine de la hiérarchie est EventTarget, hérité par Node, et d’autres nœuds DOM en héritent.

Voici l’image, les explications à suivre :

Les classes sont :

EventTarget – est la classe racine “abstraite” pour tout.

Les objets de cette classe ne sont jamais créés. Ils servent de base, afin que tous les nœuds DOM supportent les soi-disant “événements”, nous les étudierons plus tard.
Node – est également une classe “abstraite”, servant de base aux nœuds DOM.

Elle fournit la fonctionnalité de l’arborescence de base : parentNode, nextSibling, childNodes et ainsi de suite (ce sont des getters). Les objets de la classe Node ne sont jamais créés. Mais il existe d’autres classes qui en héritent (et héritent donc de la fonctionnalité Node).
Document, pour des raisons historiques souvent héritées par HTMLDocument (bien que la dernière spécification ne le dicte pas) – est un document dans son ensemble.

L’objet global document appartient exactement à cette classe. Il sert de point d’entrée au DOM.
CharacterData – une classe “abstraite”, héritée par :
- Text – la classe correspondant à un texte à l’intérieur des éléments, par ex. Bonjour dans <p>Bonjour</p>.
- Comment – la classe pour les commentaires. Ils ne sont pas affichés, mais chaque commentaire devient un membre du DOM.
Element – est la classe de base des éléments DOM.

Elle fournit une navigation au niveau des éléments comme nextElementSibling, children et des méthodes de recherche comme getElementsByTagName, querySelector.

Un navigateur prend en charge non seulement HTML, mais également XML et SVG. Ainsi, la classe Element sert de base à des classes plus spécifiques : SVGElement, XMLElement (nous n’en avons pas besoin ici) et HTMLElement.
Enfin, HTMLElement est la classe de base pour tous les éléments HTML. Nous travaillerons avec lui la plupart du temps.

Elle est héritée par des éléments HTML concrets :
- HTMLInputElement – la classe pour les éléments <input>,
- HTMLBodyElement – la classe pour les éléments <body>,
- HTMLAnchorElement – la classe pour les éléments <a>,
- …etc.

Il existe de nombreuses autres balises avec leurs propres classes qui peuvent avoir des propriétés et des méthodes spécifiques, tandis que certains éléments, tels que <span>, <section>, <article> n’ont pas de propriétés spécifiques, ce sont donc des instances de la classe HTMLElement.

Ainsi, l’ensemble complet des propriétés et des méthodes d’un nœud donné est le résultat de la chaîne de l’héritage.

Par exemple, considérons l’objet DOM pour un élément <input>. Il appartient à la classe HTMLInputElement.

Il obtient les propriétés et les méthodes en superposition de (répertoriées dans l’ordre d’héritage) :

HTMLInputElement – cette classe fournit des propriétés spécifiques à l’entrée,
HTMLElement – elle fournit des méthodes d’élément HTML communes (et des getters/setters),
Element – fournit des méthodes d’élément génériques,
Node – fournit des propriétés de noeud DOM communes,
EventTarget – apporte du support aux événements (à couvrir),
…et finalement il hérite de Object, donc les méthodes “plain object” comme hasOwnProperty sont également disponibles.

Pour voir le nom de la classe de noeud DOM, nous pouvons rappeler qu’un objet a généralement la propriété constructor. Il fait référence au constructeur de classe, et constructor.name est son nom :

alert( document.body.constructor.name ); // HTMLBodyElement

…Or we can just toString it:

alert( document.body ); // [object HTMLBodyElement]

Nous pouvons également utiliser instanceof pour vérifier l’héritage :

alert( document.body instanceof HTMLBodyElement ); // true
alert( document.body instanceof HTMLElement ); // true
alert( document.body instanceof Element ); // true
alert( document.body instanceof Node ); // true
alert( document.body instanceof EventTarget ); // true

Comme nous pouvons le voir, les nœuds DOM sont des objets JavaScript normaux. Ils utilisent des classes basées sur des prototypes pour l’héritage.

C’est aussi facile à voir en sortant un élément avec console.dir (elem) dans un navigateur. Là, dans la console, vous pouvez voir HTMLElement.prototype, Element.prototype et ainsi de suite.

La plupart des navigateurs prennent en charge deux commandes dans leurs outils de développement : console.log et console.dir. Elles sortent leurs arguments dans la console. Pour les objets JavaScript, ces commandes font généralement la même chose.

Mais pour les éléments DOM, elles sont différents :

console.log(elem) affiche l’arborescence DOM de l’élément.
console.dir(elem) affiche l’élément en tant qu’objet DOM, bon pour explorer ses propriétés.

Essayez les sur document.body.

Dans la spécification, les classes DOM ne sont pas décrites en utilisant JavaScript, mais une Interface description language spéciale (IDL), qui est généralement facile à comprendre.

Dans IDL, toutes les propriétés sont précédées de leurs types. Par exemple, DOMString, boolean et ainsi de suite.

En voici un extrait, avec des commentaires :

          // Definir HTMLInputElement
// Le signe deux-points ":" signifie que HTMLInputElement hérite de HTMLElement
interface HTMLInputElement: HTMLElement {
  // ici les propriétés et méthodes des éléments <input>

  // "DOMString" signifie que la valeur d'une propriété est une chaîne de caractères
  attribute DOMString accept;
  attribute DOMString alt;
  attribute DOMString autocomplete;
  attribute DOMString value;

  // propriété de valeur booléenne (true/false)
  attribute boolean autofocus;
  ...
  // maintenant la méthode : "void" signifie que la méthode ne renvoie aucune valeur
  void select();
  ...
}
        

La propriété “nodeType”

La propriété nodeType fournit une autre méthode “à l’ancienne” pour obtenir le “type” d’un nœud DOM.

Il a une valeur numérique :

elem.nodeType == 1 pour les nœuds élément,
elem.nodeType == 3 pour les nœuds texte,
elem.nodeType == 9 pour l’objet document,
il y a peu d’autres valeurs dans la spécification.

Par exemple :

<body>
  <script>
  let elem = document.body;

  // examinons ceci : quel type de nœud est dans elem ?
  alert(elem.nodeType); // 1 => element

  // et son premier enfant est...
  alert(elem.firstChild.nodeType); // 3 => text

  // pour l'objet document, le type est 9
  alert( document.nodeType ); // 9
  </script>
</body>

Dans les scripts modernes, nous pouvons utiliser instanceof et d’autres tests basés sur les classes pour voir le type de nœud, mais parfois nodeType peut être plus simple. Nous pouvons seulement lire nodeType, pas le changer.

Balise : nodeName et tagName

Étant donné un nœud DOM, nous pouvons lire son nom de balise dans les propriétés nodeName ou tagName :

Par exemple :