## Aufgabe
Sie haben eine einfache Aufgabenliste in HTML. Ziel ist es, durch die DOM-Hierarchie mit Eigenschaften wie `parentNode`, `childNodes`, `firstChild`, `lastChild`, `previousSibling` und `nextSibling` zu navigieren, um deren Verhalten und den Zugriff auf verschiedene Knoten zu verstehen.
1. **Zugriff auf das Elternelement**: Das `<li>`-Element mit der ID `current-task` ist ausgewählt. Greifen Sie auf dessen übergeordnetes `<ul>`-Element zu;
2. **Zugriff auf alle Kindknoten**: Rufen Sie alle Kindknoten ab, einschließlich Textknoten (wie Leerzeichen);
3. **Zugriff auf den ersten und letzten Kindknoten**:
   - Greifen Sie auf den ersten Kindknoten des übergeordneten `<ul>`-Elements zu;
   - Greifen Sie auf den letzten Kindknoten des übergeordneten `<ul>`-Elements zu.
4. **Navigation zu Geschwisterknoten**:
   - Greifen Sie auf den vorherigen Geschwisterknoten von `current-task` zu;
   - Greifen Sie auf den nächsten Geschwisterknoten von `current-task` zu.

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

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdSb2JvdG8nLCBzYW5zLXNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmNGY3ZmI7CiAgbWFyZ2luOiAwOwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIHBhZGRpbmc6IDIwcHg7CiAgY29sb3I6ICMzMzM7Cn0KCiN0YXNrLWxpc3QgewogIGxpc3Qtc3R5bGUtdHlwZTogbm9uZTsKICBwYWRkaW5nOiAwOwogIG1hcmdpbjogMjBweCAwOwogIHdpZHRoOiAzNTBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmOwogIGJveC1zaGFkb3c6IDAgNHB4IDEycHggcmdiYSgwLCAwLCAwLCAwLjEpOwogIGJvcmRlci1yYWRpdXM6IDhweDsKfQoKLnRhc2staXRlbSB7CiAgcGFkZGluZzogMTVweDsKICBmb250LXNpemU6IDFyZW07CiAgY29sb3I6ICM1YTVhNWE7CiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNlMmU1ZWM7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2UsIGNvbG9yIDAuM3MgZWFzZTsKfQoKLnRhc2staXRlbTpsYXN0LWNoaWxkIHsKICBib3JkZXItYm90dG9tOiBub25lOwp9CgoudGFzay1pdGVtOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZWFmMmY4OwogIGNvbG9yOiAjMmQ3YWJmOwp9CgojY3VycmVudC10YXNrIHsKICBmb250LXdlaWdodDogYm9sZDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZDdlOGZjOwogIGNvbG9yOiAjMmQ3YWJmOwp9CgpkaXYgewogIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7CiAgcGFkZGluZzogMjBweDsKICB3aWR0aDogMzUwcHg7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJveC1zaGFkb3c6IDAgNHB4IDEycHggcmdiYSgwLCAwLCAwLCAwLjEpOwogIG1hcmdpbi10b3A6IDIwcHg7CiAgY29sb3I6ICM0YTRhNGE7Cn0KCnAgewogIGZvbnQtc2l6ZTogMC45NXJlbTsKICBtYXJnaW46IDEwcHggMDsKfQoKI3BhcmVudC1ub2RlLWluZm8gewogIGNvbG9yOiAjMTdhMmI4Owp9CgojY2hpbGQtbm9kZXMtY291bnQgewogIGNvbG9yOiAjZmZjMTA3Owp9CgojZmlyc3QtY2hpbGQtaW5mbyB7CiAgY29sb3I6ICMyOGE3NDU7Cn0KCiNsYXN0LWNoaWxkLWluZm8gewogIGNvbG9yOiAjZGMzNTQ1Owp9CgojcHJldmlvdXMtc2libGluZy1pbmZvIHsKICBjb2xvcjogIzZmNDJjMTsKfQoKI25leHQtc2libGluZy1pbmZvIHsKICBjb2xvcjogI2ZkN2UxNDsKfQ==

Ly8gQWNjZXNzIHRoZSBwYXJlbnQgbm9kZQpjb25zdCBjdXJyZW50VGFzayA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjdXJyZW50LXRhc2snKTsKY29uc3QgcGFyZW50RWwgPSBjdXJyZW50VGFzay5fX19fXzsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ3BhcmVudC1ub2RlLWluZm8nCikudGV4dENvbnRlbnQgPSBgUGFyZW50IG5vZGUgdGFnOiAke3BhcmVudEVsLnRhZ05hbWV9YDsKCi8vIEFjY2VzcyBhbGwgY2hpbGQgbm9kZXMKY29uc3QgY2hpbGROb2RlcyA9IHBhcmVudEVsLl9fX19fOwpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgKICAnY2hpbGQtbm9kZXMtY291bnQnCikudGV4dENvbnRlbnQgPSBgVG90YWwgY2hpbGQgbm9kZXM6ICR7Y2hpbGROb2Rlcy5sZW5ndGh9YDsKCi8vIEFjY2VzcyB0aGUgRmlyc3QgYW5kIExhc3QgQ2hpbGQgTm9kZXMKY29uc3QgZmlyc3RFbGVtZW50Q2hpbGQgPSBwYXJlbnRFbC5fX19fXzsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2ZpcnN0LWNoaWxkLWluZm8nCikudGV4dENvbnRlbnQgPSBgRmlyc3QgZWxlbWVudCBjaGlsZCB0ZXh0OiAke2ZpcnN0RWxlbWVudENoaWxkLnRleHRDb250ZW50fWA7Cgpjb25zdCBsYXN0RWxlbWVudENoaWxkID0gcGFyZW50RWwuX19fX187CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdsYXN0LWNoaWxkLWluZm8nCikudGV4dENvbnRlbnQgPSBgTGFzdCBlbGVtZW50IGNoaWxkIHRleHQ6ICR7bGFzdEVsZW1lbnRDaGlsZC50ZXh0Q29udGVudH1gOwoKLy8gTmF2aWdhdGUgdG8gU2libGluZyBOb2Rlcwpjb25zdCBwcmV2aW91c0VsZW1lbnRTaWJsaW5nID0gY3VycmVudFRhc2suX19fX187CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcmV2aW91cy1zaWJsaW5nLWluZm8nKS50ZXh0Q29udGVudCA9CiAgcHJldmlvdXNFbGVtZW50U2libGluZwogICAgPyBgUHJldmlvdXMgZWxlbWVudCBzaWJsaW5nIHRleHQ6ICR7cHJldmlvdXNFbGVtZW50U2libGluZy50ZXh0Q29udGVudH1gCiAgICA6ICdObyBwcmV2aW91cyBlbGVtZW50IHNpYmxpbmcnOwoKY29uc3QgbmV4dEVsZW1lbnRTaWJsaW5nID0gY3VycmVudFRhc2suX19fX187CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCduZXh0LXNpYmxpbmctaW5mbycpLnRleHRDb250ZW50ID0gbmV4dEVsZW1lbnRTaWJsaW5nCiAgPyBgTmV4dCBlbGVtZW50IHNpYmxpbmcgdGV4dDogJHtuZXh0RWxlbWVudFNpYmxpbmcudGV4dENvbnRlbnR9YAogIDogJ05vIG5leHQgZWxlbWVudCBzaWJsaW5nJzs=

- Verwenden Sie `parentNode`, um auf das übergeordnete `<ul>`-Element zuzugreifen.
- Verwenden Sie `childNodes` auf dem übergeordneten `<ul>`, um alle Kindknoten einschließlich Textknoten (wie Leerzeichen) abzurufen;
- Verwenden Sie `firstChild` auf dem übergeordneten `<ul>`, um auf den ersten Kindknoten zuzugreifen;
- Verwenden Sie `lastChild` auf dem übergeordneten `<ul>`, um auf den letzten Kindknoten zuzugreifen;
- Verwenden Sie `previousSibling` auf `current-task`, um auf den vorherigen Geschwisterknoten zuzugreifen;
- Verwenden Sie `nextSibling` auf `current-task`, um auf den nächsten Geschwisterknoten zuzugreifen.

Ly8gQWNjZXNzIHRoZSBwYXJlbnQgbm9kZQpjb25zdCBjdXJyZW50VGFzayA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjdXJyZW50LXRhc2snKTsKY29uc3QgcGFyZW50RWwgPSBjdXJyZW50VGFzay5wYXJlbnROb2RlOwpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgKICAncGFyZW50LW5vZGUtaW5mbycKKS50ZXh0Q29udGVudCA9IGBQYXJlbnQgbm9kZSB0YWc6ICR7cGFyZW50RWwudGFnTmFtZX1gOwoKLy8gQWNjZXNzIGFsbCBjaGlsZCBub2Rlcwpjb25zdCBjaGlsZE5vZGVzID0gcGFyZW50RWwuY2hpbGROb2RlczsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2NoaWxkLW5vZGVzLWNvdW50JwopLnRleHRDb250ZW50ID0gYFRvdGFsIGNoaWxkIG5vZGVzOiAke2NoaWxkTm9kZXMubGVuZ3RofWA7CgovLyBBY2Nlc3MgdGhlIEZpcnN0IGFuZCBMYXN0IENoaWxkIE5vZGVzCmNvbnN0IGZpcnN0RWxlbWVudENoaWxkID0gcGFyZW50RWwuZmlyc3RFbGVtZW50Q2hpbGQ7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdmaXJzdC1jaGlsZC1pbmZvJwopLnRleHRDb250ZW50ID0gYEZpcnN0IGVsZW1lbnQgY2hpbGQgdGV4dDogJHtmaXJzdEVsZW1lbnRDaGlsZC50ZXh0Q29udGVudH1gOwoKY29uc3QgbGFzdEVsZW1lbnRDaGlsZCA9IHBhcmVudEVsLmxhc3RFbGVtZW50Q2hpbGQ7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdsYXN0LWNoaWxkLWluZm8nCikudGV4dENvbnRlbnQgPSBgTGFzdCBlbGVtZW50IGNoaWxkIHRleHQ6ICR7bGFzdEVsZW1lbnRDaGlsZC50ZXh0Q29udGVudH1gOwoKLy8gTmF2aWdhdGUgdG8gU2libGluZyBOb2Rlcwpjb25zdCBwcmV2aW91c0VsZW1lbnRTaWJsaW5nID0gY3VycmVudFRhc2sucHJldmlvdXNFbGVtZW50U2libGluZzsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3ByZXZpb3VzLXNpYmxpbmctaW5mbycpLnRleHRDb250ZW50ID0KICBwcmV2aW91c0VsZW1lbnRTaWJsaW5nCiAgICA/IGBQcmV2aW91cyBlbGVtZW50IHNpYmxpbmcgdGV4dDogJHtwcmV2aW91c0VsZW1lbnRTaWJsaW5nLnRleHRDb250ZW50fWAKICAgIDogJ05vIHByZXZpb3VzIGVsZW1lbnQgc2libGluZyc7Cgpjb25zdCBuZXh0RWxlbWVudFNpYmxpbmcgPSBjdXJyZW50VGFzay5uZXh0RWxlbWVudFNpYmxpbmc7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCduZXh0LXNpYmxpbmctaW5mbycpLnRleHRDb250ZW50ID0gbmV4dEVsZW1lbnRTaWJsaW5nCiAgPyBgTmV4dCBlbGVtZW50IHNpYmxpbmcgdGV4dDogJHtuZXh0RWxlbWVudFNpYmxpbmcudGV4dENvbnRlbnR9YAogIDogJ05vIG5leHQgZWxlbWVudCBzaWJsaW5nJzs=

Beherrschen Sie grundlegende JavaScript-Konzepte, einschließlich Klassen, DOM-Manipulation, Ereignisbehandlung und asynchroner Programmierung. Erlernen Sie die Erstellung dynamischer und interaktiver Webanwendungen durch Verwaltung von Benutzerinteraktionen, das Abrufen und Anzeigen von Daten sowie die effiziente Handhabung asynchroner Operationen. Dieser Kurs vermittelt Ihnen durch eine Kombination aus Theorie, praxisnahen Herausforderungen und realen Beispielen die praktischen Fähigkeiten, die für die moderne Webentwicklung erforderlich sind.

Erlernen der Grundlagen von JavaScript-Klassen, von Klassendeklarationen bis zur Definition von Methoden zur Erweiterung der Funktionalität.
Entdeckung des effektiven Einsatzes von Parameterobjekten, Verwaltung privater Eigenschaften und Steuerung des Zugriffs mit Gettern und Setzern.
Beherrschung statischer Eigenschaften und statischer Methoden sowie Nutzung der Leistungsfähigkeit der Klassenvererbung mit "extends" und "super()" zur Entwicklung skalierbarer und wiederverwendbarer Codes.

Beherrschen Sie die DOM-Manipulation zur Erstellung dynamischer, interaktiver Webanwendungen. Navigieren und verändern Sie die Struktur des DOM, aktualisieren Sie Inhalte dynamisch und setzen Sie Best Practices für Sicherheit und Performance um. Unterscheiden Sie zwischen Eigenschaften und Attributen, um Ihren Code zu optimieren.

Erschließen Sie die Interaktivität Ihrer Webanwendungen durch das Beherrschen von JavaScript-Ereignissen. Verstehen Sie die Ereignisweiterleitung, steuern Sie das Ereignisverhalten und implementieren Sie effiziente Ereignisbehandlung für Benutzerinteraktionen. Optimieren Sie die Leistung mit fortgeschrittenen Techniken wie der Ereignisdelegation.

Vertiefung in asynchrones JavaScript, einschließlich Callbacks, Promises und async/await. Vermittlung von Methoden zum Abrufen von Daten aus APIs, zur Integration von Drittanbieter-Bibliotheken und zum effizienten Umgang mit mehreren Anfragen, um Kompetenzen für die Entwicklung datengetriebener Anwendungen zu erwerben.

Herausforderung: Navigation in der DOM-Hierarchie

Aufgabe

Awesome!

Herausforderung: Navigation in der DOM-Hierarchie

Aufgabe