Kursinhalt
Fortgeschrittene JavaScript-Meisterschaft
Fortgeschrittene JavaScript-Meisterschaft
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.
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
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!