Lernen Herausforderung: Navigation in der DOM-Hierarchie | DOM-Manipulation für Interaktive Webentwicklung

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.

Zugriff auf das Elternelement: Das <li>-Element mit der ID current-task ist ausgewählt. Greifen Sie auf dessen übergeordnetes <ul>-Element zu;
Zugriff auf alle Kindknoten: Rufen Sie alle Kindknoten ab, einschließlich Textknoten (wie Leerzeichen);
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.
Navigation zu Geschwisterknoten:
- Greifen Sie auf den vorherigen Geschwisterknoten von current-task zu;
- Greifen Sie auf den nächsten Geschwisterknoten von current-task zu.

index.html

index.css

index.js

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.

index.html

index.css

index.js

War alles klar?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 5

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

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

Swipe um das Menü anzuzeigen

Aufgabe

Zugriff auf das Elternelement: Das <li>-Element mit der ID current-task ist ausgewählt. Greifen Sie auf dessen übergeordnetes <ul>-Element zu;
Zugriff auf alle Kindknoten: Rufen Sie alle Kindknoten ab, einschließlich Textknoten (wie Leerzeichen);
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.
Navigation zu Geschwisterknoten:
- Greifen Sie auf den vorherigen Geschwisterknoten von current-task zu;
- Greifen Sie auf den nächsten Geschwisterknoten von current-task zu.

index.html

index.css

index.js

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.

index.html

index.css

index.js

War alles klar?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 5