Naviguer dans le DOM

"Naviguer dans la DOM", représente l'action de se déplacer, ou récupérer un noeud parent, enfant ou adjacent.

Tableau des propriétés

Action	Propriétés des noeud	Retour
Récupérer les fils	node.childNodeselement.children	NodeList tableau de noeudsHTMLCollection tableau d'éléments
Premier fils	node.firstChildelement.firstElementChild	NodeElement
Dernier fils	node.lastChildelement.lastElementChild	NodeElement
Frère suivant	node.nextSibling	Node
Frère précédent	node.previousSibling	Node
Récupèrer le parent	node.parentNode	Node

Comme on peut le voir, certaines actions sont réalisables avec deux propriétés différentes.

Il existe deux "familles" de propriétés pour naviguer dans la DOM :

• Les propriétés de type Node , pour naviguer dans tous les types de noeuds : éléments, textes ou commentaires
• Les propriétés de type Element , pour naviguer uniquement dans les éléments

Dans l'exemple ci après, on récupère le premier fils de la div avec la propriété firstChild, avec la propriétéfirstElementChild .

• La propriété firstChild retourne le premier noeud peut importe son type.
  Dans l'exemple le premier noeud est un noeud texte contenant "Bonjour le".
• La propriété firstElementChild retourne le premier noeud de type élément.
  Dans l'exemple le premier élément de la div est <strong>monde</strong>.

Bonjour le <strong>monde</strong>!

<script>
// Récupère la première  du document
const div = document.querySelector("div");

// Affiche le premier fils avec firstChild
console.log( div.firstChild ); // "Bonjour le" 

// Affiche le premier fils de type Element avec firstElementChild
console.log( div.firstElementChild ); // "<strong>monde</strong>"
</script>

Propriétés de type Node

Bonjour <strong>le <em>monde</em></strong>!

<script>
// Récupère le premier élément strong du document
const strongElement = document.querySelector("strong");

// Noeud parent
moneElement.parentNode; // 

// Tous les fils (tableau de noeuds)
monElement.childNodes; // ["le ", <em>]

// Premier fils
monElement.firstChild; // "le "

// Dernier fils
monElement.lastChild; // <em>

// Frêre suivant
monElement.nextSibling; // "!"

// Frêre précédent
monElement.previousSibling; // "Bonjour "
</script>

Propriétés de type Element

   <h1>Animaux</h1>
   <ul>
      <li>🐔</li>
      <li>🐷</li>
   </ul>


<script>
// Récupère la première liste non triée du document
const listeAnimaux = document.querySelector("ul");

// Noeud parent
listeAnimaux.parentNode; // ...

// Tous les fils (tableau de noeuds)
listeAnimaux.children; // [<li>🐔</li>, <li>🐷</li>]

// Premier fils
listeAnimaux.firstElementChild; // <li>🐔</li>

// Dernier fils
listeAnimaux.lastElementChild; // <li>🐷</li>
</script>