Challenge: 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.

1. Access the Parent Node: The <li> element with the ID current-task is selected. Access its parent <ul> element;
2. Access All Child Nodes: Retrieve all child nodes, including text nodes (like whitespace);
3. 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>.
4. Navigate to Sibling Nodes:
   • Access its previous sibling node on current-task;
   • Access its next sibling node on current-task.

• 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 on current-task to access its previous sibling node;
• Use nextSibling on current-task to access its next sibling node.