DOM - Navigation

6 min Niveau 8

En JavaScript, grâce au DOM, il est possible de naviguer sur l’arbre de nœud grâce à la relation entre les nœuds.

Les nœuds du DOM

Selon le standard W3C HTML DOM, tout, absolument tout, au sein d’un document HTML, est considéré comme un nœud :

Le document entier est un nœud document
Chaque élément HTML est un nœud élément
Les textes à l’intérieur de chaque élément HTML sont des nœuds texte
Tous les commentaires sont des nœuds commentaires

Représentation des noeud du DOM

Avec le DOM HTML, tous les nœuds dans l’arbre de nœud sont accessibles en Javascript, et de nouveaux nœuds peuvent être créés. Tous les nœuds peuvent être modifiés ou effacés.

Relations entre les nœuds

Dans l’arbre des nœuds, chacun à une relation hiérarchique avec les autres. Les termes suivants sont utilisés pour décrire ces relations : parents, enfants, frères.

Dans l’arbre, le nœud tout en haut est appelé racine (root, en anglais) ou nœud racine (root node). Chaque nœud a forcément un parent, excepté la racine qui, lui, n’en a pas ; un nœud a également un certain nombre d’enfants. Les nœuds frères et sœurs ont forcément le même nœud parent.

Représentation des noeud du DOM

Exemple :

<html>

  <head>
    <title>DOM Tutorial</title>
  </head>

  <body>
    <h1>DOM Lesson one</h1>
    <p>Hello world!</p>
  </body>

</html>

Voici la hiérarchie des nœuds dans le code HTML ci-dessus :

<html> est le nœud racine
<html> n’a pas de nœud parent
<html> est le parent de <head> et <body>
<head> est le premier enfant de <html>
<body> est le dernier enfant de <html>

De plus :

<head> a un seul enfant : <title>
<title> a un enfant - un nœud texte : “DOM Tutorial”
<body> a deux enfants <h1> et <p>
<h1> a un enfant : “DOM Lesson one”
<p> a un enfant : “Hello World !”
<h1> et <p> sont frères

Naviguer entre les nœuds

Se connecter pour voir la suite

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !