Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Compréhension de la Hiérarchie et des Relations du DOM | Manipulation du DOM pour le Développement Web Interactif
Maîtrise Avancée de JavaScript

bookCompréhension de la Hiérarchie et des Relations du DOM

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.

index.html

index.html

index.js

index.js

copy

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).

index.html

index.html

index.js

index.js

copy

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.

index.html

index.html

index.js

index.js

copy

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 ».

index.html

index.html

index.js

index.js

copy

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.

index.html

index.html

index.css

index.css

index.js

index.js

copy

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.

1. Dans le DOM, qu'est-ce qu'un « nœud parent » ?

2. Quelle propriété utiliseriez-vous pour accéder à tous les nœuds enfants d'un élément, y compris les nœuds de texte ?

3. Dans le code suivant, quelle sera la sortie de currentTask.previousElementSibling.textContent; ?

question mark

Dans le DOM, qu'est-ce qu'un « nœud parent » ?

Select the correct answer

question mark

Quelle propriété utiliseriez-vous pour accéder à tous les nœuds enfants d'un élément, y compris les nœuds de texte ?

Select the correct answer

question mark

Dans le code suivant, quelle sera la sortie de currentTask.previousElementSibling.textContent; ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 4

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

Can you show me a code example of how to use these DOM traversal properties?

What is the difference between `childNodes` and `children` in JavaScript?

How do I avoid selecting text nodes when traversing the DOM?

Awesome!

Completion rate improved to 2.22

bookCompréhension de la Hiérarchie et des Relations du DOM

Glissez pour afficher le menu

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.

index.html

index.html

index.js

index.js

copy

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).

index.html

index.html

index.js

index.js

copy

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.

index.html

index.html

index.js

index.js

copy

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 ».

index.html

index.html

index.js

index.js

copy

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.

index.html

index.html

index.css

index.css

index.js

index.js

copy

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.

1. Dans le DOM, qu'est-ce qu'un « nœud parent » ?

2. Quelle propriété utiliseriez-vous pour accéder à tous les nœuds enfants d'un élément, y compris les nœuds de texte ?

3. Dans le code suivant, quelle sera la sortie de currentTask.previousElementSibling.textContent; ?

question mark

Dans le DOM, qu'est-ce qu'un « nœud parent » ?

Select the correct answer

question mark

Quelle propriété utiliseriez-vous pour accéder à tous les nœuds enfants d'un élément, y compris les nœuds de texte ?

Select the correct answer

question mark

Dans le code suivant, quelle sera la sortie de currentTask.previousElementSibling.textContent; ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 4
some-alt