## Aufgabe
Sie haben eine einfache Aufgabenliste in HTML. Ihr Ziel ist es, durch die DOM-Hierarchie zu navigieren, indem Sie Eigenschaften wie `parentNode`, `childNodes`, `firstChild`, `lastChild`, `previousSibling` und `nextSibling` verwenden, um deren Verhalten zu verstehen und wie sie auf verschiedene Knoten zugreifen.
1. **Zugriff auf das übergeordnete Element**: Das `<li>`-Element mit der ID `current-task` ist ausgewählt. Greifen Sie auf das übergeordnete `<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=

Dieser Kurs bietet eine tiefgehende Erkundung der wichtigsten JavaScript-Prinzipien, mit Schwerpunkt auf Klassen, DOM-Manipulation, Ereignisbehandlung und asynchroner Programmierung. Sie lernen, dynamische und interaktive Elemente zu erstellen, Benutzerinteraktionen zu verwalten und asynchrone Operationen zu handhaben. Durch eine Mischung aus Theorie und praktischen Herausforderungen hilft Ihnen dieser Kurs, praktische JavaScript-Fähigkeiten für reale Anwendungen zu entwickeln.

Lernen Sie die Grundlagen von JavaScript-Klassen, von Klassendeklarationen bis hin zur Definition von Methoden, die die Funktionalität verbessern. Entdecken Sie, wie Sie Parameterobjekte effektiv nutzen, private Eigenschaften verwalten und den Zugriff mit Gettern und Settern steuern. Beherrschen Sie statische Eigenschaften und statische Methoden und entfesseln Sie die Kraft der Klassenvererbung mit "extends" und "super()", um skalierbaren und wiederverwendbaren Code zu erstellen.

Beherrschen Sie die DOM-Manipulation, um dynamische, interaktive Webanwendungen zu erstellen. Navigieren und ändern Sie die Struktur des DOM, aktualisieren Sie Inhalte dynamisch und implementieren Sie Best Practices für Sicherheit und Leistung. Unterscheiden Sie zwischen Eigenschaften und Attributen, um Ihren Code zu optimieren.

Entfesseln Sie die Interaktivität Ihrer Webanwendungen, indem Sie JavaScript-Ereignisse meistern. Verstehen Sie die Ereignisausbreitung, steuern Sie das Ereignisverhalten und implementieren Sie eine effiziente Ereignisbehandlung für Benutzerinteraktionen. Optimieren Sie die Leistung mit fortgeschrittenen Techniken wie der Ereignisdelegation.

Dieser Abschnitt behandelt die Grundlagen von asynchronem JavaScript, einschließlich Callbacks, Promises und async/await. Sie lernen, Daten von APIs abzurufen, Drittanbieter-Bibliotheken zu integrieren und mehrere Anfragen effizient zu bearbeiten, um Fähigkeiten zum Erstellen datengetriebener Anwendungen zu entwickeln.

Fortgeschrittene JavaScript-Meisterschaft

Herausforderung: DOM-Hierarchie

Aufgabe