JavaScript DOM Traversing

DOM Traversing refers to the process of navigating the DOM tree using JavaScript. It allows you to move between parent, child, and sibling elements, enabling powerful and dynamic web page manipulation.



1. Accessing Parent Element

Use .parentElement to move from a child to its parent.

Example:

<div id="parent">
<p id="child">Hello</p>
</div>
<script>
const child = document.getElementById("child");
console.log(child.parentElement.id); // Output: "parent"
</script>


2. Accessing Children

Use .children or .firstElementChild / .lastElementChild.

Example:

<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
const list = document.getElementById("list");
console.log(list.children); // HTMLCollection of <li>
console.log(list.firstElementChild); // <li>Item 1</li>
console.log(list.lastElementChild); // <li>Item 2</li>
</script>


3. Accessing Siblings

Use .previousElementSibling or .nextElementSibling.

Example:

<ul>
<li>Item 1</li>
<li id="middle">Item 2</li>
<li>Item 3</li>
</ul>
<script>
const middle = document.getElementById("middle");
console.log(middle.previousElementSibling.textContent); // Item 1
console.log(middle.nextElementSibling.textContent); // Item 3
</script>


4. childNodes vs. children

Property Returns
.children Only element nodes
.childNod es All node types (including text & comments)


Example:

const list = document.getElementById("list");
console.log(list.childNodes); // Might include text nodes (like
whitespace)
console.log(list.children); // Only actual <li> elements


5. Closest Ancestor Matching Selector

Use .closest() to find the nearest parent (or self) matching a selector.

Example:

<div class="card">
<p class="info">Click me</p>
</div>
<script>
const info = document.querySelector(".info");
const card = info.closest(".card");
console.log(card); // The outer <div class="card">
</script>


6. Traversing in Practice: Toggle Class of Parent Element

<div class="box">
<button onclick="highlightParent(this)">Highlight Box</button>
</div>
<script>
function highlightParent(btn) {
btn.parentElement.classList.toggle("highlight");
}
</script>
<style>
.highlight {
background-color: yellow;
}
</style>


Real-World Use Cases

  • Form validation by checking parent .form-group
  • Accordion toggles
  • Dynamic menus and dropdowns
  • Traversing nested structures like tables or cards