Traverse the DOM: Parents, Children, Siblings

function domTraversalExample(elementId) {
  const startElement = document.getElementById(elementId);
  if (!startElement) {
    console.error(`Element with ID '${elementId}' not found.`);
    return;
  }

  console.log(`
--- Traversing from element with ID: ${elementId} (${startElement.tagName}) ---`);

  // 1. Parent Element
  const parent = startElement.parentElement;
  console.log('Parent:', parent ? parent.tagName : 'No parent');

  // 2. Children Elements (HTMLCollection)
  console.log('Children:');
  if (startElement.children.length > 0) {
    Array.from(startElement.children).forEach((child, index) => {
      console.log(`  Child ${index + 1}: ${child.tagName} (ID: ${child.id || 'N/A'})`);
    });
  } else {
    console.log('  No children elements.');
  }

  // 3. First and Last Child Elements
  const firstChild = startElement.firstElementChild;
  const lastChild = startElement.lastElementChild;
  console.log('First Child:', firstChild ? firstChild.tagName : 'N/A');
  console.log('Last Child:', lastChild ? lastChild.tagName : 'N/A');

  // 4. Next and Previous Sibling Elements
  const nextSibling = startElement.nextElementSibling;
  const previousSibling = startElement.previousElementSibling;
  console.log('Next Sibling:', nextSibling ? nextSibling.tagName : 'N/A');
  console.log('Previous Sibling:', previousSibling ? previousSibling.tagName : 'N/A');

  console.log('--------------------------------------------------');
}

// Example HTML Structure:
/*
<div id="grandparent">
  <div id="parent1">
    <span id="child1-1">Child 1-1</span>
    <span id="child1-2" class="target">Child 1-2 (Target)</span>
    <span id="child1-3">Child 1-3</span>
  </div>
  <div id="parent2"></div>
</div>
*/

// Simulate the HTML structure for the example if running in a non-browser environment
// In a browser, these elements would already exist.
if (typeof document !== 'undefined') {
  document.body.innerHTML = `
    <div id="grandparent">
      <div id="parent1">
        <span id="child1-1">Child 1-1</span>
        <span id="child1-2" class="target">Child 1-2 (Target)</span>
        <span id="child1-3">Child 1-3</span>
      </div>
      <div id="parent2"></div>
    </div>
  `;
  domTraversalExample('child1-2');
  domTraversalExample('parent1');
  domTraversalExample('grandparent');
} else {
  console.log('Running in a non-browser environment. Please run in a browser to see DOM traversal in action.');
}