Understanding the DOM Hierarchy

DOM traversal involves moving through the document structure using JavaScript to access, modify, or interact with different nodes. The DOM is structured as a tree with nodes connected in a hierarchy, including parent, child, and sibling relationships:

• Parent Node: A node that has other nodes nested within it;
• Child Nodes: Nodes directly inside a parent node;
• Sibling Nodes: Nodes that share the same parent and are on the same level.

In this structure:

• <ul> is the parent of the <li> elements;
• Each <li> is a child of the <ul>;
• The two <li> elements are siblings of each other.

Navigating the DOM

JavaScript provides several properties to navigate these relationships, allowing you to move between nodes efficiently.

ParentNode

The parentNode property allows you to access the current node's parent. It's useful when you need to move upwards in the DOM tree.

In this example, parentNode accesses the parent <ul> of the selected <li> and adds a border around the entire list.

ChildNodes

The childNodes property returns a collection of all child nodes of a given element, including text nodes (whitespace between elements).

This example selects the task list and loops through its children, adding padding to each <li> element.

FirstChild and LastChild

firstChild: Accesses the first child of an element, including text nodes.
lastChild: Accesses the last child of an element, including text nodes.

Suppose we need to highlight the first and last items in a shopping cart.

This example highlights the first and last items in a list, demonstrating how to access and modify the first and last nodes.

Because of the fact that firstChild and lastChild often refer to text nodes (like whitespace) rather than the actual element nodes (<li>) - a better approach is to use firstElementChild and lastElementChild, which specifically target the first and last child elements, skipping over any text nodes.

PreviousSibling and NextSibling

nextSibling: Retrieves the next sibling node of the current node.
previousSibling: Retrieves the previous sibling node of the current node.

Consider navigating between tasks in a to-do list, marking tasks as "up next" or "previously completed."

In this scenario:

• nextSibling moves to the next task and marks it as "up next";
• previousSibling marks the previous task as completed.

However, nextSibling and previousSibling often point to text nodes (such as whitespace). To target the actual element nodes (<li>), we should use nextElementSibling and previousElementSibling, which specifically skip over text nodes.

Practical Example: Task Manager

Imagine we're building a task manager where users can add, highlight, and manage tasks. We want to dynamically update tasks, mark the first task as the "priority," highlight the next task as "upcoming," and mark the last task as "completed." This example will demonstrate navigating through the DOM using parentNode, childNodes, firstElementChild, lastElementChild, nextElementSibling, and previousElementSibling.

When the "Highlight Tasks" button is clicked, JavaScript applies distinct styles to tasks based on their position. The firstElementChild marks the first task as "Priority" with bold, yellow styling. lastElementChild marks the last task as "Completed" with green and strikethrough effects. The nextElementSibling highlights the second task as "Upcoming" in blue, and if a previous sibling exists, it gets a blue border.