• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

coding learning websites codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JavaScript DOM Navigation

← Previous Next →

What is DOM Navigation?

DOM Navigation refers to the process of traversing and accessing elements in the Document Object Model (DOM) relative to other elements. It allows you to move up, down, or sideways in the DOM tree to access parents, children, and siblings of an element.

DOM Navigation is important for manipulating elements dynamically, especially when elements do not have IDs or classes, or when you want to handle relative elements.

Why DOM Navigation is Useful

DOM Navigation helps you to:

  • Access parent or child elements relative to a selected element.

  • Move to sibling elements for dynamic changes.

  • Traverse the DOM tree efficiently for event handling.

  • Build interactive UI components like menus, carousels, or forms dynamically.

  • Perform complex manipulations without relying solely on IDs or classes.

Traversing the DOM Tree

The DOM is structured like a tree, with nodes representing elements, text, or comments.

  • Parent Node – The element directly above a node.

  • Child Nodes – Elements nested inside a parent node.

  • Sibling Nodes – Elements at the same level (same parent).

Accessing Parent Elements

Use parentNode or parentElement to access an element’s parent.

let child = document.querySelector(".child");

// Access parent element
let parent = child.parentElement;

// Change parent background color
parent.style.backgroundColor = "lightblue";

  • parentElement ignores non-element nodes (like text nodes).

  • parentNode includes all node types.

Accessing Child Elements

children Property

let parent = document.querySelector(".parent");

// Get all child elements
let children = parent.children;

// Change background of first child
children[0].style.backgroundColor = "yellow";

  • Returns HTMLCollection of child elements.

  • Only element nodes are included (ignores text nodes).

childNodes Property

let childNodes = parent.childNodes;
console.log(childNodes); // Includes text, comment, and element nodes

  • Useful if you want all nodes, not just elements.

Accessing First and Last Child

let parent = document.querySelector(".parent");

// First element child
parent.firstElementChild.style.color = "red";

// Last element child
parent.lastElementChild.style.fontWeight = "bold";

  • firstElementChild and lastElementChild ignore text nodes.

  • firstChild and lastChild include all node types.

Accessing Sibling Elements

Next and Previous Element Siblings

let element = document.querySelector(".middle");

// Next sibling element
let next = element.nextElementSibling;
next.style.border = "2px solid green";

// Previous sibling element
let prev = element.previousElementSibling;
prev.style.border = "2px solid blue";

  • nextElementSibling and previousElementSibling only consider element nodes.

  • nextSibling and previousSibling include all node types.

Accessing Node Names and Types

let element = document.querySelector(".middle");

console.log("Node name:", element.nodeName); // Returns tag name
console.log("Node type:", element.nodeType); // 1 = element node, 3 = text node

  • Useful when traversing nodes programmatically.

  • Node types help filter elements while navigating.

Traversing Up and Down the DOM

Example: Change Parent and Sibling Styles

let child = document.querySelector(".child");

// Change parent background
child.parentElement.style.backgroundColor = "lightgray";

// Change previous sibling text color
child.previousElementSibling.style.color = "red";

// Change next sibling text color
child.nextElementSibling.style.color = "green";

This approach helps when you only have a reference to one element but need to affect nearby elements.

Looping Through Child Elements

let parent = document.querySelector(".parent");

for (let i = 0; i < parent.children.length; i++) {
    parent.children[i].style.padding = "10px";
    parent.children[i].style.border = "1px solid black";
}

  • Use loops to apply styles or manipulate multiple children efficiently.

  • Useful for dynamic lists, tables, or menus.

Practical Example: DOM Navigation in a List

<ul class="menu">
    <li>Home</li>
    <li class="active">About</li>
    <li>Services</li>
    <li>Contact</li>
</ul>

let activeItem = document.querySelector(".active");

// Change previous and next menu items
if (activeItem.previousElementSibling) {
    activeItem.previousElementSibling.style.color = "gray";
}

if (activeItem.nextElementSibling) {
    activeItem.nextElementSibling.style.color = "gray";
}

// Highlight parent UL
activeItem.parentElement.style.backgroundColor = "#f0f0f0";

  • Demonstrates navigation to parent, previous, and next siblings.

  • Useful for highlighting menu items or dynamic lists.

Best Practices for DOM Navigation

  • Prefer parentElement, children, firstElementChild, and nextElementSibling over properties that include text nodes for clarity.

  • Always check if a parent or sibling exists before modifying it to avoid errors.

  • Use loops and arrays for batch operations on multiple children.

  • Combine DOM navigation with event handling for dynamic interactions.

  • Minimize deep DOM traversal when possible for better performance.

Summary of the Tutorial

JavaScript DOM Navigation allows you to traverse and access elements relative to a selected element. Key points:

  • Access parent elements using parentElement.

  • Access child elements using children or childNodes.

  • Access first and last children with firstElementChild and lastElementChild.

  • Access siblings with nextElementSibling and previousElementSibling.

  • Loop through children for batch updates.

  • DOM navigation is essential for dynamic UI manipulation and responsive interactions.

Mastering DOM navigation enables you to efficiently manipulate elements without relying solely on IDs or classes, making your code more flexible and maintainable.

Practice Questions

  1. Select an element with a class .child and change its parent element’s background color.

  2. Access all child elements of a <div> and change their font color to blue.

  3. Get the first and last child of a <ul> and make the text bold.

  4. Select a middle element and change the background color of its previous and next siblings.

  5. Loop through all children of a container and add a border around each element.

  6. Select a list item and log the node name and node type of its parent.

  7. Access the next sibling of an element and append text to it dynamically.

  8. Traverse from a child element to its grandparent and change the grandparent’s background color.

  9. Select an element and check if it has a previous sibling; if yes, change its text color.

  10. Using a container element, loop through its children and change the background color of every alternate child.

← Previous Next →

JavaScript

online coding class codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

codepractice logo
Login
Go Back Top