Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Utmaning: Navigera i DOM-hierarkin | DOM-manipulation för Interaktiv Webbapplikationsutveckling
Avancerad JavaScript-mästerskap

bookUtmaning: 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.

  1. Åtkomst till föräldernoden: <li>-elementet med ID current-task är valt. Hämta dess förälder <ul>-element;
  2. Åtkomst till alla barnnoder: Hämta alla barnnoder, inklusive textnoder (som blanksteg);
  3. Å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>.
  4. Navigera till syskonnoder:
    • Hämta föregående syskonnod på current-task;
    • Hämta nästa syskonnod på current-task.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • 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 previousSiblingcurrent-task för att komma åt dess föregående syskonnod;
  • Använd nextSiblingcurrent-task för att komma åt dess nästa syskonnod.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 5

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

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

bookUtmaning: 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.

  1. Åtkomst till föräldernoden: <li>-elementet med ID current-task är valt. Hämta dess förälder <ul>-element;
  2. Åtkomst till alla barnnoder: Hämta alla barnnoder, inklusive textnoder (som blanksteg);
  3. Å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>.
  4. Navigera till syskonnoder:
    • Hämta föregående syskonnod på current-task;
    • Hämta nästa syskonnod på current-task.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • 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 previousSiblingcurrent-task för att komma åt dess föregående syskonnod;
  • Använd nextSiblingcurrent-task för att komma åt dess nästa syskonnod.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 5
some-alt