Compré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.js
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.js
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.js
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.js
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.css
index.js
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;
?
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
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
Compré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.js
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.js
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.js
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.js
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.css
index.js
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;
?
Merci pour vos commentaires !