DOM Navigation
Learn to navigate through DOM elements like a pro
🧭 What is DOM Navigation?
DOM Navigation allows you to move between elements in the document tree. You can find parent, child, and sibling elements easily.
// Navigate to parent element
let parent = element.parentElement;
// Navigate to first child
let firstChild = element.firstElementChild;
Try it:
Navigation Properties
Parent Navigation
Move up to parent elements
element.parentElement
element.parentNodeChild Navigation
Move down to child elements
element.children
element.firstElementChild
element.lastElementChildSibling Navigation
Move to next/previous siblings
element.nextElementSibling
element.previousElementSiblingQuery Methods
Find elements by selectors
element.querySelector()
element.querySelectorAll()🔹 Parent Element Navigation
Access parent elements using these properties:
// Get parent element
let parent = element.parentElement;
// Get parent node (includes text nodes)
let parentNode = element.parentNode;
// Example: Change parent background
let button = document.getElementById('myButton');
button.parentElement.style.backgroundColor = 'lightblue';Interactive Example:
This is the parent div
🔹 Child Element Navigation
Navigate to child elements:
// Get all children
let children = element.children;
// Get first child element
let firstChild = element.firstElementChild;
// Get last child element
let lastChild = element.lastElementChild;
// Example: Style all children
for(let child of element.children) {
child.style.color = 'blue';
}Interactive Example:
First child paragraph
Second child paragraph
Third child paragraph
🔹 Sibling Navigation
Move between sibling elements:
// Get next sibling element
let nextSibling = element.nextElementSibling;
// Get previous sibling element
let prevSibling = element.previousElementSibling;
// Example: Navigate through siblings
let current = firstElement;
while(current) {
console.log(current.textContent);
current = current.nextElementSibling;
}