HTML DOM Nœuds

Dans le DOM HTML, tout est un nœud. Le DOM est le HTML traité comme un arbre de nœuds.

Nœuds DOM

Nœuds DOM

Selon la norme W3C HTML DOM, tout dans un document HTML est un nœud :

  • Le document entier est un nœud de document
  • Chaque élément HTML est un nœud élément
  • Le texte à l'intérieur des éléments HTML est constitué de nœuds texte
  • Chaque attribut HTML est un nœud attribut
  • Les commentaires sont des nœuds de commentaire

Arbre de nœuds du DOM HTML

Le DOM HTML considère un document HTML comme une structure arborescente. Cette structure est appelée unarbre de nœuds：

Exemple d'arbre du DOM HTML

DOM HTML tree

Nœuds parents, enfants et frères et sœurs

Les nœuds de l'arbre de nœuds entretiennent une relation hiérarchique entre eux.

Nous utilisons souvent les termesparent、enfantetfrère ou sœuret d'autres termes pour décrire ces relations. Un nœud parent a des nœuds enfants. Les nœuds enfants au même niveau sont appelés frères et sœurs (frères ou sœurs).

  • Dans l'arbre de nœuds, le nœud supérieur est appelé la racine.
  • Chaque nœud a un parent, sauf la racine (qui n'a pas de parent).
  • Un nœud peut avoir un nombre quelconque de nœuds enfants.
  • Les nœuds frères sont des nœuds qui partagent le même nœud parent.

L'image ci-dessous montre une partie de l'arbre de nœuds et les relations entre les nœuds :

Node tree

Regardez le fragment HTML suivant :

<html> <head> <meta charset="utf-8"> <title>Tutoriel DOM</title> </head> <body> <h1>Cours DOM 1</h1> <p>Bonjour le monde !</p> </body> </html>

D'après le HTML ci-dessus :

  • Le nœud <html> n'a pas de parent ; il est le nœud racine
  • Le parent de <head> et <body> est le nœud <html>
  • Le parent du nœud texte "Bonjour le monde !" est le nœud <p>

Et :

  • Le nœud <html> a deux nœuds enfants : <head> et <body>
  • Le nœud <head> a deux nœuds enfants : les nœuds <meta> et <title>
  • Le nœud <title> a également un nœud enfant : le nœud texte "DOM Tutorial"
  • Les nœuds <h1> et <p> sont des nœuds frères, et sont aussi des enfants de <body>

Et :

  • L'élément <head> est le premier enfant de l'élément <html>
  • L'élément <body> est le dernier enfant de l'élément <html>
  • L'élément <h1> est le premier enfant de l'élément <body>
  • L'élément <p> est le dernier enfant de l'élément <body>

Avertissement !

Une erreur courante dans le traitement du DOM consiste à s'attendre à ce qu'un nœud élément contienne du texte.

Dans cet exemple :<title>DOM Tutorial</title>, le nœud élément <title> contient unnœud texte avec la valeur "DOM Tutorial".。

Grâce à la propriétéinnerHTMLdu nœud, vous pouvez accéder à la valeur du nœud texte.

Vous en apprendrez plus sur la propriété innerHTML dans un chapitre ultérieur.

Autres extensions