Défi : Hiérarchie DOM
Tâche
Vous avez une simple liste de tâches en HTML. Votre objectif est de naviguer à travers la hiérarchie du DOM en utilisant des propriétés comme parentNode
, childNodes
, firstChild
, lastChild
, previousSibling
, et nextSibling
pour comprendre leur comportement et comment ils accèdent à différents nœuds.
- Accéder au nœud parent : L'élément
<li>
avec l'IDcurrent-task
est sélectionné. Accédez à son élément parent<ul>
; - Accéder à tous les nœuds enfants : Récupérez tous les nœuds enfants, y compris les nœuds de texte (comme les espaces blancs);
- Accéder aux premiers et derniers nœuds enfants :
- Accédez au premier nœud enfant sur le parent
<ul>
; - Accédez au dernier nœud enfant sur le parent
<ul>
.
- Accédez au premier nœud enfant sur le parent
- Naviguer vers les nœuds frères :
- Accédez à son nœud frère précédent sur
current-task
; - Accédez à son nœud frère suivant sur
current-task
.
- Accédez à son nœud frère précédent sur
index.html
index.css
index.js
- Utilisez
parentNode
pour accéder à son parent<ul>
. - Utilisez
childNodes
sur le parent<ul>
pour récupérer tous les nœuds enfants, y compris les nœuds de texte (comme les espaces blancs); - Utilisez
firstChild
sur le parent<ul>
pour accéder au premier nœud enfant; - Utilisez
lastChild
sur le parent<ul>
pour accéder au dernier nœud enfant; - Utilisez
previousSibling
surcurrent-task
pour accéder à son nœud frère précédent; - Utilisez
nextSibling
surcurrent-task
pour accéder à son nœud frère suivant.
index.html
index.css
index.js
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
Awesome!
Completion rate improved to 2.22
Défi : Hiérarchie DOM
Glissez pour afficher le menu
Tâche
Vous avez une simple liste de tâches en HTML. Votre objectif est de naviguer à travers la hiérarchie du DOM en utilisant des propriétés comme parentNode
, childNodes
, firstChild
, lastChild
, previousSibling
, et nextSibling
pour comprendre leur comportement et comment ils accèdent à différents nœuds.
- Accéder au nœud parent : L'élément
<li>
avec l'IDcurrent-task
est sélectionné. Accédez à son élément parent<ul>
; - Accéder à tous les nœuds enfants : Récupérez tous les nœuds enfants, y compris les nœuds de texte (comme les espaces blancs);
- Accéder aux premiers et derniers nœuds enfants :
- Accédez au premier nœud enfant sur le parent
<ul>
; - Accédez au dernier nœud enfant sur le parent
<ul>
.
- Accédez au premier nœud enfant sur le parent
- Naviguer vers les nœuds frères :
- Accédez à son nœud frère précédent sur
current-task
; - Accédez à son nœud frère suivant sur
current-task
.
- Accédez à son nœud frère précédent sur
index.html
index.css
index.js
- Utilisez
parentNode
pour accéder à son parent<ul>
. - Utilisez
childNodes
sur le parent<ul>
pour récupérer tous les nœuds enfants, y compris les nœuds de texte (comme les espaces blancs); - Utilisez
firstChild
sur le parent<ul>
pour accéder au premier nœud enfant; - Utilisez
lastChild
sur le parent<ul>
pour accéder au dernier nœud enfant; - Utilisez
previousSibling
surcurrent-task
pour accéder à son nœud frère précédent; - Utilisez
nextSibling
surcurrent-task
pour accéder à son nœud frère suivant.
index.html
index.css
index.js
Merci pour vos commentaires !