Comprendre la Hiérarchie du DOM

La traversée du DOM implique de parcourir la structure du document en utilisant JavaScript pour accéder, modifier ou interagir avec différents nœuds. Le DOM est structuré comme un arbre avec des nœuds connectés dans une hiérarchie, y compris les relations de parent, enfant et frère et sœur :

• Nœud Parent : Un nœud qui a d'autres nœuds imbriqués en son sein ;
• Nœuds Enfants : Nœuds directement à l'intérieur d'un nœud parent ;
• Nœuds Frères et Sœurs : Nœuds qui partagent le même parent et sont au même niveau.

Dans cette structure :

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

Navigation dans le DOM

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

ParentNode

La propriété parentNode vous permet d'accéder au parent du nœud actuel. Elle est utile lorsque vous devez monter dans l'arbre 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 blancs 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 articles dans un panier d'achat.

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

En raison du fait que firstChild et lastChild se réfèrent souvent à des nœuds de texte (comme les espaces) plutôt qu'aux nœuds d'élément réels (<li>) - une meilleure approche consiste à utiliser firstElementChild et lastElementChild, qui ciblent spécifiquement les premiers et derniers éléments enfants, en sautant tous 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érez la navigation entre les tâches dans une liste de tâches, en marquant les tâches comme "à suivre" ou "précédemment complétées".

Dans ce scénario :

• nextSibling passe à la tâche suivante et la marque comme "à suivre" ;
• 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 nœuds d'élément réels (<li>), nous devrions utiliser nextElementSibling et previousElementSibling, qui sautent spécifiquement les nœuds de texte.

Exemple Pratique : Gestionnaire de Tâches

Imaginez que nous construisons un gestionnaire de tâches où les utilisateurs peuvent ajouter, mettre en surbrillance et gérer des tâches. Nous voulons mettre à jour dynamiquement les tâches, marquer la première tâche comme "priorité", mettre en surbrillance la tâche suivante comme "à venir", et marquer la dernière tâche comme "terminée". Cet exemple démontrera la navigation à travers le DOM en utilisant parentNode, childNodes, firstElementChild, lastElementChild, nextElementSibling, et previousElementSibling.

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