Navigate the DOM Tree to Find Parent, Child, or Sibling Elements

// Assume an HTML structure like:
// <div id="parent-container">
//   <p>Sibling 1</p>
//   <div id="current-element" class="highlighted">
//     <span>Child 1</span>
//     <span>Child 2</span>
//   </div>
//   <p>Sibling 2</p>
// </div>

const currentElement = document.getElementById('current-element');

if (currentElement) {
  console.log('Current Element:', currentElement.id);

  // 1. Find the closest ancestor matching a selector (including itself)
  const parentContainer = currentElement.closest('#parent-container');
  console.log('Closest Parent Container:', parentContainer ? parentContainer.id : 'Not Found');

  // 2. Access immediate child elements
  const children = currentElement.children; // Returns an HTMLCollection
  console.log('Number of Children:', children.length);
  if (children.length > 0) {
    console.log('First Child:', children[0].tagName);
  }

  // 3. Access next sibling element
  const nextSibling = currentElement.nextElementSibling;
  console.log('Next Sibling:', nextSibling ? nextSibling.textContent : 'No next sibling');

  // 4. Access previous sibling element
  const previousSibling = currentElement.previousElementSibling;
  console.log('Previous Sibling:', previousSibling ? previousSibling.textContent : 'No previous sibling');

  // Note: childNodes, nextSibling, previousSibling also exist but include text nodes
  // Using Element versions (e.g., children, nextElementSibling) is usually preferred.
}