Herausforderung: Navigation in der DOM-Hierarchie

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.

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