La traversée du DOM consiste à parcourir la structure du document à l'aide de JavaScript afin d'accéder à différents nœuds, de les modifier ou d'interagir avec eux. Le DOM est structuré comme un arbre dont les nœuds sont reliés selon une hiérarchie, comprenant des relations de parent, enfant et frère/sœur :

• Nœud parent : Nœud qui contient d'autres nœuds imbriqués ;
• Nœuds enfants : Nœuds situés directement à l'intérieur d'un nœud parent ;
• Nœuds frères/sœurs : Nœuds partageant le même parent et situés au même niveau.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Dans cette structure :

• <ul> est le parent des éléments <li> ;
• Chaque <li> est un enfant du <ul> ;
• Les deux éléments <li> sont frères/sœurs l'un de l'autre.

Navigation dans le DOM

JavaScript propose plusieurs propriétés pour naviguer dans ces relations, permettant de se déplacer efficacement entre les nœuds.

ParentNode

La propriété parentNode permet d'accéder au parent du nœud actuel. Utile pour naviguer vers le haut dans l'arborescence du DOM.

Dans cet exemple, parentNode accède au parent <ul> de l'élément <li> sélectionné et ajoute une bordure autour de toute la liste.

ChildNodes

La propriété childNodes renvoie une collection de tous les nœuds enfants d’un élément donné, y compris les nœuds de texte (espaces entre les éléments).

Cet exemple sélectionne la liste des tâches et parcourt ses enfants, en ajoutant une marge intérieure à chaque élément <li>.

FirstChild et LastChild

firstChild : Accède au premier enfant d’un élément, y compris les nœuds de texte.
lastChild : Accède au dernier enfant d’un élément, y compris les nœuds de texte.

Supposons que nous devions mettre en évidence les premiers et derniers éléments d’un panier d’achats.

Cet exemple met en évidence les premiers et derniers éléments d’une liste, illustrant comment accéder et modifier les premiers et derniers nœuds.

En raison du fait que firstChild et lastChild font souvent référence à des nœuds de texte (comme les espaces blancs) plutôt qu’aux véritables nœuds d’élément (<li>), une meilleure approche consiste à utiliser firstElementChild et lastElementChild, qui ciblent spécifiquement le premier et le dernier enfant élément, en ignorant les nœuds de texte.

PreviousSibling et NextSibling

nextSibling : Récupère le nœud frère suivant du nœud actuel.
previousSibling : Récupère le nœud frère précédent du nœud actuel.

Considérer la navigation entre les tâches d'une liste de tâches, en marquant les tâches comme « à venir » ou « précédemment terminées ».

Dans ce scénario :

• nextSibling passe à la tâche suivante et la marque comme « à venir » ;
• previousSibling marque la tâche précédente comme terminée.

Cependant, nextSibling et previousSibling pointent souvent vers des nœuds de texte (comme les espaces). Pour cibler les véritables nœuds d’élément (<li>), il convient d’utiliser nextElementSibling et previousElementSibling, qui ignorent spécifiquement les nœuds de texte.

Exemple pratique : Gestionnaire de tâches

Imaginons que nous construisons un gestionnaire de tâches où les utilisateurs peuvent ajouter, mettre en avant et gérer des tâches. Nous souhaitons mettre à jour dynamiquement les tâches, marquer la première tâche comme « prioritaire », mettre en surbrillance la tâche suivante comme « à venir » et indiquer la dernière tâche comme « terminée ». Cet exemple illustrera la navigation dans le DOM à l’aide de parentNode, childNodes, firstElementChild, lastElementChild, nextElementSibling et previousElementSibling.

Lorsque le bouton « Mettre en surbrillance les tâches » est cliqué, JavaScript applique des styles distincts aux tâches selon leur position. Le firstElementChild marque la première tâche comme « Prioritaire » avec un style gras et jaune. Le lastElementChild marque la dernière tâche comme « Terminée » avec des effets verts et barrés. Le nextElementSibling met en avant la deuxième tâche comme « À venir » en bleu, et si un frère précédent existe, il reçoit une bordure bleue.