Advanced DOM Traversal and Element Selection

// HTML Example:
// <div class="container">
//   <ul id="myList">
//     <li class="item active">Item 1</li>
//     <li class="item">Item 2
//       <span class="sub-text">Detail</span>
//     </li>
//     <li class="item">Item 3</li>
//   </ul>
//   <p class="description">A description.</p>
// </div>
// <button class="action-btn">Action</button>

// 1. Selecting the first element matching a CSS selector
const firstItem = document.querySelector('.item');
console.log('First item text:', firstItem.textContent.trim()); // Output: First item text: Item 1

// 2. Selecting all elements matching a CSS selector
const allItems = document.querySelectorAll('.item');
console.log('Total items:', allItems.length); // Output: Total items: 3
allItems.forEach(item => console.log('  - Item:', item.textContent.trim().split('
')[0]));

// 3. Finding the closest ancestor that matches a selector
const subText = document.querySelector('.sub-text');
const closestListItem = subText.closest('li');
console.log('Closest list item to sub-text:', closestListItem.textContent.trim().split('
')[0]); // Output: Closest list item to sub-text: Item 2

// 4. Accessing parent and child elements
const activeItem = document.querySelector('.item.active');
const parentList = activeItem.parentElement;
console.log('Parent of active item (id):', parentList.id); // Output: Parent of active item (id): myList

const firstChildOfList = parentList.firstElementChild;
console.log('First child of list:', firstChildOfList.textContent.trim().split('
')[0]); // Output: First child of list: Item 1

const childrenOfList = parentList.children;
console.log('Number of children in list:', childrenOfList.length); // Output: Number of children in list: 3

// 5. Accessing siblings
const nextSibling = activeItem.nextElementSibling;
console.log('Next sibling of active item:', nextSibling.textContent.trim().split('
')[0]); // Output: Next sibling of active item: Item 2

const previousSibling = activeItem.previousElementSibling;
console.log('Previous sibling of active item:', previousSibling); // Output: Previous sibling of active item: null (as it's the first)