Challenge: Navigate the DOM Hierarchy
Task
You have a simple task list in HTML. Your goal is to navigate through the DOM hierarchy using properties like parentNode
, childNodes
, firstChild
, lastChild
, previousSibling
, and nextSibling
to understand their behavior and how they access different nodes.
Access the Parent Node: The
<li>
element with the IDcurrent-task
is selected. Access its parent<ul>
element;Access All Child Nodes: Retrieve all child nodes, including text nodes (like whitespace);
Access the First and Last Child Nodes:
Access the first child node on the parent
<ul>
;Access the last child node on the parent
<ul>
.
Navigate to Sibling Nodes:
Access its previous sibling node on
current-task
;Access its next sibling node on
current-task
.
index.html
index.css
index.js
Use
parentNode
to access its parent<ul>
element.Use
childNodes
on the parent<ul>
to retrieve all child nodes, including text nodes (like whitespace);Use
firstChild
on the parent<ul>
to access the first child node;Use
lastChild
on the parent<ul>
to access the last child node;Use
previousSibling
oncurrent-task
to access its previous sibling node;Use
nextSibling
oncurrent-task
to access its next sibling node.
index.html
index.css
index.js
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat