Efficient DOM Element Selection and Basic Traversal

// Helper to log results for demonstration
const log = (message, element = null) => {
  console.log(message, element ? element.outerHTML.split('
')[0] + '...' : '');
};

// Example HTML setup:
// <div id="container">
//   <p class="text-item first">Paragraph 1</p>
//   <p class="text-item">Paragraph 2</p>
//   <span class="text-item last">Span Text</span>
// </div>
const containerDiv = document.createElement('div');
containerDiv.id = 'container';
containerDiv.innerHTML = '
  <p class="text-item first">Paragraph 1</p>
  <p class="text-item">Paragraph 2</p>
  <span class="text-item last">Span Text</span>
';
document.body.appendChild(containerDiv);

// 1. Selecting a single element using querySelector
const firstParagraph = document.querySelector('.text-item.first');
log('Selected first paragraph:', firstParagraph);
// Expected: <p class="text-item first">Paragraph 1</p>...

// 2. Selecting multiple elements using querySelectorAll
const allTextItems = document.querySelectorAll('.text-item');
log('Selected all text items (NodeList size):', allTextItems.length);
allTextItems.forEach((item, index) => {
  log(`  Item ${index + 1}:`, item);
});
// Expected:
// Item 1: <p class="text-item first">Paragraph 1</p>...
// Item 2: <p class="text-item">Paragraph 2</p>...
// Item 3: <span class="text-item last">Span Text</span>...


// 3. Traversing to the next sibling element
if (firstParagraph) {
  const nextSibling = firstParagraph.nextElementSibling;
  log('Next sibling of first paragraph:', nextSibling);
  // Expected: <p class="text-item">Paragraph 2</p>...
}

// 4. Traversing to parent and children (additional examples)
if (firstParagraph) {
  const parent = firstParagraph.parentNode;
  log('Parent of first paragraph:', parent);
  // Expected: <div id="container">...
}

if (containerDiv) {
    const children = containerDiv.children; // Returns HTMLCollection
    log('Children of containerDiv (HTMLCollection size):', children.length);
    Array.from(children).forEach((child, index) => {
        log(`  Child ${index + 1}:`, child);
    });
}