DOM Traversal in DOM

1 / 9

Introduction

DOM Traversal

DOM traversal means navigating the DOM tree from one node to another — moving to parent, child, or sibling nodes using properties built into every DOM element.

Instead of selecting an element fresh with querySelector, traversal lets you move relative to an element you already have.

codehtml

1<ul id="list">
2  <li class="item">Apple</li>
3  <li class="item">Banana</li>
4  <li class="item">Mango</li>
5</ul>

codejs

1const list = document.getElementById("list");
2
3// Traverse to children
4console.log(list.children);       // HTMLCollection of <li> elements
5console.log(list.firstElementChild); // <li>Apple</li>
6console.log(list.lastElementChild);  // <li>Mango</li>