Navigate the DOM Tree with JavaScript Traversals

// HTML structure example:
// <div id="container">
//   <p>This is a paragraph.</p>
//   <ul id="myList">
//     <li>Item A</li>
//     <li class="active">Item B</li>
//     <li>Item C</li>
//   </ul>
//   <div id="footer">
//     <span>Copyright 2023</span>
//   </div>
//</div>

function traverseDOM() {
  const activeItem = document.querySelector('#myList .active');
  if (!activeItem) {
    console.warn("Active item not found.");
    return;
  }

  console.log('--- Starting from:', activeItem.textContent, '---');

  // 1. Getting the Parent Element
  const parentList = activeItem.parentElement;
  console.log('Parent Element (UL):', parentList.tagName, parentList.id);

  // 2. Getting Child Elements
  // Note: children returns only element nodes
  console.log('Children of Parent (LI items):');
  Array.from(parentList.children).forEach((child, index) => {
    console.log(`- Child ${index + 1}:`, child.textContent);
  });

  // 3. Getting Sibling Elements
  const nextSibling = activeItem.nextElementSibling;
  const previousSibling = activeItem.previousElementSibling;
  console.log('Next Sibling:', nextSibling ? nextSibling.textContent : 'None');
  console.log('Previous Sibling:', previousSibling ? previousSibling.textContent : 'None');

  // 4. Getting First and Last Child
  const firstChild = parentList.firstElementChild;
  const lastChild = parentList.lastElementChild;
  console.log('First Child of Parent:', firstChild ? firstChild.textContent : 'None');
  console.log('Last Child of Parent:', lastChild ? lastChild.textContent : 'None');

  // 5. Closest ancestor matching a selector
  const containerDiv = activeItem.closest('#container');
  console.log('Closest #container ancestor:', containerDiv ? containerDiv.tagName + '#' + containerDiv.id : 'None');
}

// Call the function to see the traversal in action
// traverseDOM();