Herausforderung: DOM-Hierarchie
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.
- Zugriff auf das übergeordnete Element: Das
<li>
-Element mit der IDcurrent-task
ist ausgewählt. Greifen Sie auf das übergeordnete<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.
- Greifen Sie auf den ersten Kindknoten des übergeordneten
- Navigation zu Geschwisterknoten:
- Greifen Sie auf den vorherigen Geschwisterknoten von
current-task
zu; - Greifen Sie auf den nächsten Geschwisterknoten von
current-task
zu.
- Greifen Sie auf den vorherigen Geschwisterknoten von
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
aufcurrent-task
, um auf den vorherigen Geschwisterknoten zuzugreifen; - Verwenden Sie
nextSibling
aufcurrent-task
, um auf den nächsten Geschwisterknoten zuzugreifen.
index.html
index.css
index.js
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.22
Herausforderung: DOM-Hierarchie
Swipe um das Menü anzuzeigen
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.
- Zugriff auf das übergeordnete Element: Das
<li>
-Element mit der IDcurrent-task
ist ausgewählt. Greifen Sie auf das übergeordnete<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.
- Greifen Sie auf den ersten Kindknoten des übergeordneten
- Navigation zu Geschwisterknoten:
- Greifen Sie auf den vorherigen Geschwisterknoten von
current-task
zu; - Greifen Sie auf den nächsten Geschwisterknoten von
current-task
zu.
- Greifen Sie auf den vorherigen Geschwisterknoten von
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
aufcurrent-task
, um auf den vorherigen Geschwisterknoten zuzugreifen; - Verwenden Sie
nextSibling
aufcurrent-task
, um auf den nächsten Geschwisterknoten zuzugreifen.
index.html
index.css
index.js
Danke für Ihr Feedback!