Advance JavaScript (DOM, BOM, Web API) / Document Object Model

Traversing Elements

📌 What is DOM Traversing?

DOM Traversing means moving through HTML elements relative to a selected element — such as moving to its parent, children, or siblings.

👉 Instead of selecting directly, you navigate the DOM tree.

🌳 Sample HTML (Used in All Examples)

<div id="container">
  <h2>Title</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

🔼 1. parentElement

✔️ Purpose: Moves upward to get the parent element.

element.parentElement

🧪 Example

const para = document.querySelector("p");
console.log(para.parentElement);
<div id="container">...</div

📝 Explanation

  • Returns the direct parent element

  • Skips text and comment nodes

🔽 2. children

✔️ Purpose: Selects only element children of a parent.

element.children

🧪 Example

const box = document.getElementById("container");
console.log(box.children);
HTMLCollection(3) [h2, p, p]

📝 Explanation

  • Returns HTMLCollection

  • Does not include text nodes (spaces, line breaks)

🔽 3. firstElementChild

✔️ Purpose: Selects the first child element.

element.firstElementChild

🧪 Example

const box = document.getElementById("container");
console.log(box.firstElementChild.textContent);
Title

📝 Explanation

  • Skips text nodes

  • Useful when structure is known

➡️ 4. nextElementSibling

✔️ Purpose: Moves to the next sibling element.

element.nextElementSibling

🧪 Example

const firstPara = document.querySelector("p");
console.log(firstPara.nextElementSibling.textContent);
Paragraph 2

📝 Explanation

  • Ignores text nodes

  • Returns null if no sibling exists

🔽 5. lastElementChild

✔️ Purpose: Selects the last child element.

element.lastElementChild

🧪 Example

console.log(box.lastElementChild.textContent);
Paragraph 2

⬅️ 6. previousElementSibling

✔️ Purpose: Moves to the previous sibling element.

element.previousElementSibling

🧪 Example

const secondPara = document.querySelectorAll("p")[1];
console.log(secondPara.previousElementSibling.textContent);
Paragraph 1

🎯 Real-World Use Case

// Highlight all children
Array.from(box.children).forEach(child => {
  child.style.border = "1px solid blue";
});

// Move from one element to another
document.querySelector("h2")
  .nextElementSibling
  .style.color = "red";