Utmaning: Navigera i DOM-hierarkin
Uppgift
Du har en enkel att-göra-lista i HTML. Målet är att navigera genom DOM-hierarkin med hjälp av egenskaper som parentNode
, childNodes
, firstChild
, lastChild
, previousSibling
och nextSibling
för att förstå deras beteende och hur de används för att komma åt olika noder.
- Åtkomst till föräldernoden:
<li>
-elementet med IDcurrent-task
är valt. Hämta dess förälder<ul>
-element; - Åtkomst till alla barnnoder: Hämta alla barnnoder, inklusive textnoder (som blanksteg);
- Åtkomst till första och sista barnnoden:
- Hämta första barnnoden på föräldern
<ul>
; - Hämta sista barnnoden på föräldern
<ul>
.
- Hämta första barnnoden på föräldern
- Navigera till syskonnoder:
- Hämta föregående syskonnod på
current-task
; - Hämta nästa syskonnod på
current-task
.
- Hämta föregående syskonnod på
index.html
index.css
index.js
- Använd
parentNode
för att komma åt dess förälder<ul>
-element. - Använd
childNodes
på föräldern<ul>
för att hämta alla barnnoder, inklusive textnoder (som blanksteg); - Använd
firstChild
på föräldern<ul>
för att komma åt första barnnoden; - Använd
lastChild
på föräldern<ul>
för att komma åt sista barnnoden; - Använd
previousSibling
påcurrent-task
för att komma åt dess föregående syskonnod; - Använd
nextSibling
påcurrent-task
för att komma åt dess nästa syskonnod.
index.html
index.css
index.js
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Can you show me the HTML structure of the task list?
Can you provide example JavaScript code for these DOM operations?
What is the difference between childNodes and children in this context?
Awesome!
Completion rate improved to 2.22
Utmaning: Navigera i DOM-hierarkin
Svep för att visa menyn
Uppgift
Du har en enkel att-göra-lista i HTML. Målet är att navigera genom DOM-hierarkin med hjälp av egenskaper som parentNode
, childNodes
, firstChild
, lastChild
, previousSibling
och nextSibling
för att förstå deras beteende och hur de används för att komma åt olika noder.
- Åtkomst till föräldernoden:
<li>
-elementet med IDcurrent-task
är valt. Hämta dess förälder<ul>
-element; - Åtkomst till alla barnnoder: Hämta alla barnnoder, inklusive textnoder (som blanksteg);
- Åtkomst till första och sista barnnoden:
- Hämta första barnnoden på föräldern
<ul>
; - Hämta sista barnnoden på föräldern
<ul>
.
- Hämta första barnnoden på föräldern
- Navigera till syskonnoder:
- Hämta föregående syskonnod på
current-task
; - Hämta nästa syskonnod på
current-task
.
- Hämta föregående syskonnod på
index.html
index.css
index.js
- Använd
parentNode
för att komma åt dess förälder<ul>
-element. - Använd
childNodes
på föräldern<ul>
för att hämta alla barnnoder, inklusive textnoder (som blanksteg); - Använd
firstChild
på föräldern<ul>
för att komma åt första barnnoden; - Använd
lastChild
på föräldern<ul>
för att komma åt sista barnnoden; - Använd
previousSibling
påcurrent-task
för att komma åt dess föregående syskonnod; - Använd
nextSibling
påcurrent-task
för att komma åt dess nästa syskonnod.
index.html
index.css
index.js
Tack för dina kommentarer!