Navigate the DOM Tree to Find Related Elements

function navigateDOM(elementId) {
  const startElement = document.getElementById(elementId);

  if (!startElement) {
    console.warn(`Element with ID '${elementId}' not found.`);
    return;
  }

  console.log(`Starting from element: <${startElement.tagName.toLowerCase()} id="${elementId}">`);

  // Find the closest ancestor matching a selector
  const closestDiv = startElement.closest('div');
  if (closestDiv) {
    console.log('Closest div ancestor:', closestDiv);
  }

  // Find the direct parent element
  const parent = startElement.parentElement;
  if (parent) {
    console.log('Direct parent:', parent);
  }

  // Find the next sibling element
  const nextSibling = startElement.nextElementSibling;
  if (nextSibling) {
    console.log('Next sibling:', nextSibling);
  }

  // Find the previous sibling element
  const prevSibling = startElement.previousElementSibling;
  if (prevSibling) {
    console.log('Previous sibling:', prevSibling);
  }

  // Find all direct children elements
  const children = Array.from(startElement.children);
  if (children.length > 0) {
    console.log('Direct children:', children);
  }

  // Find a specific child using querySelector
  const specificChild = startElement.querySelector('.highlight');
  if (specificChild) {
    console.log('Specific child (.highlight):', specificChild);
  }
}

// Example Usage:
// Assume HTML:
// <div id="container">
//   <p>Sibling 1</p>
//   <span id="mySpan" class="highlight">Target Span</span>
//   <p>Sibling 2</p>
//   <ul>
//     <li>Item A</li>
//     <li>Item B</li>
//   </ul>
// </div>

navigateDOM('mySpan');