## 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`.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHVsIGlkPSJ0YXNrLWxpc3QiPgogICAgICA8bGkgY2xhc3M9InRhc2staXRlbSI+UHJlcGFyZSBwcmVzZW50YXRpb248L2xpPgogICAgICA8bGkgY2xhc3M9InRhc2staXRlbSI+V3JpdGUgcmVwb3J0PC9saT4KICAgICAgPGxpIGlkPSJjdXJyZW50LXRhc2siIGNsYXNzPSJ0YXNrLWl0ZW0iPlJldmlldyBwcm9qZWN0PC9saT4KICAgICAgPGxpIGNsYXNzPSJ0YXNrLWl0ZW0iPlN1Ym1pdCBmZWVkYmFjazwvbGk+CiAgICAgIDxsaSBjbGFzcz0idGFzay1pdGVtIj5QbGFuIG5leHQgc3RlcHM8L2xpPgogICAgPC91bD4KICAgIDwhLS0gRGlzcGxheSBSZXN1bHRzIC0tPgogICAgPGRpdj4KICAgICAgPHAgaWQ9InBhcmVudC1ub2RlLWluZm8iPjwvcD4KICAgICAgPHAgaWQ9ImNoaWxkLW5vZGVzLWNvdW50Ij48L3A+CiAgICAgIDxwIGlkPSJmaXJzdC1jaGlsZC1pbmZvIj48L3A+CiAgICAgIDxwIGlkPSJsYXN0LWNoaWxkLWluZm8iPjwvcD4KICAgICAgPHAgaWQ9InByZXZpb3VzLXNpYmxpbmctaW5mbyI+PC9wPgogICAgICA8cCBpZD0ibmV4dC1zaWJsaW5nLWluZm8iPjwvcD4KICAgIDwvZGl2PgogICAgPHNjcmlwdCBzcmM9ImluZGV4LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdSb2JvdG8nLCBzYW5zLXNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmNGY3ZmI7CiAgbWFyZ2luOiAwOwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIHBhZGRpbmc6IDIwcHg7CiAgY29sb3I6ICMzMzM7Cn0KCiN0YXNrLWxpc3QgewogIGxpc3Qtc3R5bGUtdHlwZTogbm9uZTsKICBwYWRkaW5nOiAwOwogIG1hcmdpbjogMjBweCAwOwogIHdpZHRoOiAzNTBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmOwogIGJveC1zaGFkb3c6IDAgNHB4IDEycHggcmdiYSgwLCAwLCAwLCAwLjEpOwogIGJvcmRlci1yYWRpdXM6IDhweDsKfQoKLnRhc2staXRlbSB7CiAgcGFkZGluZzogMTVweDsKICBmb250LXNpemU6IDFyZW07CiAgY29sb3I6ICM1YTVhNWE7CiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNlMmU1ZWM7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2UsIGNvbG9yIDAuM3MgZWFzZTsKfQoKLnRhc2staXRlbTpsYXN0LWNoaWxkIHsKICBib3JkZXItYm90dG9tOiBub25lOwp9CgoudGFzay1pdGVtOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZWFmMmY4OwogIGNvbG9yOiAjMmQ3YWJmOwp9CgojY3VycmVudC10YXNrIHsKICBmb250LXdlaWdodDogYm9sZDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZDdlOGZjOwogIGNvbG9yOiAjMmQ3YWJmOwp9CgpkaXYgewogIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7CiAgcGFkZGluZzogMjBweDsKICB3aWR0aDogMzUwcHg7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJveC1zaGFkb3c6IDAgNHB4IDEycHggcmdiYSgwLCAwLCAwLCAwLjEpOwogIG1hcmdpbi10b3A6IDIwcHg7CiAgY29sb3I6ICM0YTRhNGE7Cn0KCnAgewogIGZvbnQtc2l6ZTogMC45NXJlbTsKICBtYXJnaW46IDEwcHggMDsKfQoKI3BhcmVudC1ub2RlLWluZm8gewogIGNvbG9yOiAjMTdhMmI4Owp9CgojY2hpbGQtbm9kZXMtY291bnQgewogIGNvbG9yOiAjZmZjMTA3Owp9CgojZmlyc3QtY2hpbGQtaW5mbyB7CiAgY29sb3I6ICMyOGE3NDU7Cn0KCiNsYXN0LWNoaWxkLWluZm8gewogIGNvbG9yOiAjZGMzNTQ1Owp9CgojcHJldmlvdXMtc2libGluZy1pbmZvIHsKICBjb2xvcjogIzZmNDJjMTsKfQoKI25leHQtc2libGluZy1pbmZvIHsKICBjb2xvcjogI2ZkN2UxNDsKfQ==

Ly8gQWNjZXNzIHRoZSBwYXJlbnQgbm9kZQpjb25zdCBjdXJyZW50VGFzayA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjdXJyZW50LXRhc2snKTsKY29uc3QgcGFyZW50RWwgPSBjdXJyZW50VGFzay5fX19fXzsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ3BhcmVudC1ub2RlLWluZm8nCikudGV4dENvbnRlbnQgPSBgUGFyZW50IG5vZGUgdGFnOiAke3BhcmVudEVsLnRhZ05hbWV9YDsKCi8vIEFjY2VzcyBhbGwgY2hpbGQgbm9kZXMKY29uc3QgY2hpbGROb2RlcyA9IHBhcmVudEVsLl9fX19fOwpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgKICAnY2hpbGQtbm9kZXMtY291bnQnCikudGV4dENvbnRlbnQgPSBgVG90YWwgY2hpbGQgbm9kZXM6ICR7Y2hpbGROb2Rlcy5sZW5ndGh9YDsKCi8vIEFjY2VzcyB0aGUgRmlyc3QgYW5kIExhc3QgQ2hpbGQgTm9kZXMKY29uc3QgZmlyc3RFbGVtZW50Q2hpbGQgPSBwYXJlbnRFbC5fX19fXzsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2ZpcnN0LWNoaWxkLWluZm8nCikudGV4dENvbnRlbnQgPSBgRmlyc3QgZWxlbWVudCBjaGlsZCB0ZXh0OiAke2ZpcnN0RWxlbWVudENoaWxkLnRleHRDb250ZW50fWA7Cgpjb25zdCBsYXN0RWxlbWVudENoaWxkID0gcGFyZW50RWwuX19fX187CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdsYXN0LWNoaWxkLWluZm8nCikudGV4dENvbnRlbnQgPSBgTGFzdCBlbGVtZW50IGNoaWxkIHRleHQ6ICR7bGFzdEVsZW1lbnRDaGlsZC50ZXh0Q29udGVudH1gOwoKLy8gTmF2aWdhdGUgdG8gU2libGluZyBOb2Rlcwpjb25zdCBwcmV2aW91c0VsZW1lbnRTaWJsaW5nID0gY3VycmVudFRhc2suX19fX187CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcmV2aW91cy1zaWJsaW5nLWluZm8nKS50ZXh0Q29udGVudCA9CiAgcHJldmlvdXNFbGVtZW50U2libGluZwogICAgPyBgUHJldmlvdXMgZWxlbWVudCBzaWJsaW5nIHRleHQ6ICR7cHJldmlvdXNFbGVtZW50U2libGluZy50ZXh0Q29udGVudH1gCiAgICA6ICdObyBwcmV2aW91cyBlbGVtZW50IHNpYmxpbmcnOwoKY29uc3QgbmV4dEVsZW1lbnRTaWJsaW5nID0gY3VycmVudFRhc2suX19fX187CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCduZXh0LXNpYmxpbmctaW5mbycpLnRleHRDb250ZW50ID0gbmV4dEVsZW1lbnRTaWJsaW5nCiAgPyBgTmV4dCBlbGVtZW50IHNpYmxpbmcgdGV4dDogJHtuZXh0RWxlbWVudFNpYmxpbmcudGV4dENvbnRlbnR9YAogIDogJ05vIG5leHQgZWxlbWVudCBzaWJsaW5nJzs=

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

Ly8gQWNjZXNzIHRoZSBwYXJlbnQgbm9kZQpjb25zdCBjdXJyZW50VGFzayA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjdXJyZW50LXRhc2snKTsKY29uc3QgcGFyZW50RWwgPSBjdXJyZW50VGFzay5wYXJlbnROb2RlOwpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgKICAncGFyZW50LW5vZGUtaW5mbycKKS50ZXh0Q29udGVudCA9IGBQYXJlbnQgbm9kZSB0YWc6ICR7cGFyZW50RWwudGFnTmFtZX1gOwoKLy8gQWNjZXNzIGFsbCBjaGlsZCBub2Rlcwpjb25zdCBjaGlsZE5vZGVzID0gcGFyZW50RWwuY2hpbGROb2RlczsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2NoaWxkLW5vZGVzLWNvdW50JwopLnRleHRDb250ZW50ID0gYFRvdGFsIGNoaWxkIG5vZGVzOiAke2NoaWxkTm9kZXMubGVuZ3RofWA7CgovLyBBY2Nlc3MgdGhlIEZpcnN0IGFuZCBMYXN0IENoaWxkIE5vZGVzCmNvbnN0IGZpcnN0RWxlbWVudENoaWxkID0gcGFyZW50RWwuZmlyc3RFbGVtZW50Q2hpbGQ7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdmaXJzdC1jaGlsZC1pbmZvJwopLnRleHRDb250ZW50ID0gYEZpcnN0IGVsZW1lbnQgY2hpbGQgdGV4dDogJHtmaXJzdEVsZW1lbnRDaGlsZC50ZXh0Q29udGVudH1gOwoKY29uc3QgbGFzdEVsZW1lbnRDaGlsZCA9IHBhcmVudEVsLmxhc3RFbGVtZW50Q2hpbGQ7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdsYXN0LWNoaWxkLWluZm8nCikudGV4dENvbnRlbnQgPSBgTGFzdCBlbGVtZW50IGNoaWxkIHRleHQ6ICR7bGFzdEVsZW1lbnRDaGlsZC50ZXh0Q29udGVudH1gOwoKLy8gTmF2aWdhdGUgdG8gU2libGluZyBOb2Rlcwpjb25zdCBwcmV2aW91c0VsZW1lbnRTaWJsaW5nID0gY3VycmVudFRhc2sucHJldmlvdXNFbGVtZW50U2libGluZzsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3ByZXZpb3VzLXNpYmxpbmctaW5mbycpLnRleHRDb250ZW50ID0KICBwcmV2aW91c0VsZW1lbnRTaWJsaW5nCiAgICA/IGBQcmV2aW91cyBlbGVtZW50IHNpYmxpbmcgdGV4dDogJHtwcmV2aW91c0VsZW1lbnRTaWJsaW5nLnRleHRDb250ZW50fWAKICAgIDogJ05vIHByZXZpb3VzIGVsZW1lbnQgc2libGluZyc7Cgpjb25zdCBuZXh0RWxlbWVudFNpYmxpbmcgPSBjdXJyZW50VGFzay5uZXh0RWxlbWVudFNpYmxpbmc7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCduZXh0LXNpYmxpbmctaW5mbycpLnRleHRDb250ZW50ID0gbmV4dEVsZW1lbnRTaWJsaW5nCiAgPyBgTmV4dCBlbGVtZW50IHNpYmxpbmcgdGV4dDogJHtuZXh0RWxlbWVudFNpYmxpbmcudGV4dENvbnRlbnR9YAogIDogJ05vIG5leHQgZWxlbWVudCBzaWJsaW5nJzs=

Behärska grundläggande JavaScript-koncept, inklusive klasser, DOM-manipulation, händelsehantering och asynkron programmering. Lär dig att skapa dynamiska och interaktiva webbapplikationer genom att hantera användarinteraktioner, hämta och visa data samt effektivt hantera asynkrona operationer. Genom en kombination av teori, praktiska utmaningar och verkliga exempel ger denna kurs dig de praktiska färdigheter som krävs för modern webbutveckling.

Lär dig grunderna i JavaScript-klasser, från klassdeklarationer till att definiera metoder som förbättrar funktionaliteten. Upptäck hur du använder parameterobjekt effektivt, hanterar privata egenskaper och kontrollerar åtkomst med getters och setters. Behärska statiska egenskaper och statiska metoder samt utnyttja kraften i klassarv med "extends" och "super()" för att skapa skalbar och återanvändbar kod.

Behärska DOM-manipulation för att skapa dynamiska, interaktiva webbapplikationer. Navigera och modifiera DOM-strukturen, uppdatera innehåll dynamiskt och tillämpa bästa praxis för säkerhet och prestanda. Skilj mellan egenskaper och attribut för att optimera din kod.

Lås upp interaktiviteten i dina webbapplikationer genom att bemästra JavaScript-händelser. Förstå händelsepropagering, kontrollera händelsebeteende och implementera effektiv händelsehantering för användarinteraktioner. Optimera prestanda med avancerade tekniker som händelsedelegering.

Fördjupa dig i asynkron JavaScript, inklusive återanrop, löften och async/await. Lär dig att hämta data från API:er, integrera tredjepartsbibliotek och hantera flera förfrågningar effektivt, vilket bygger färdigheter för att skapa datadrivna applikationer.

Utmaning: Navigera i DOM-hierarkin

Uppgift