Understanding and Iterating DOM Collections: HTMLCollection vs NodeList

// Assume some elements:
// <div class="item">Item 1</div>
// <div class="item">Item 2</div>
// <span class="item">Item 3</span>

// HTMLCollection (live): Returned by getElementsByClassName, getElementsByTagName
const liveCollection = document.getElementsByClassName('item');
console.log('Initial HTMLCollection size:', liveCollection.length); // e.g., 3

// Add a new element dynamically
const newItem = document.createElement('p');
newItem.className = 'item';
newItem.textContent = 'Item 4 (added)';
document.body.appendChild(newItem);

// HTMLCollection updates automatically because it's 'live'
console.log('Updated HTMLCollection size:', liveCollection.length); // e.g., 4

// To iterate safely with live collections (avoiding issues if elements are added/removed during iteration):
// 1. Convert to Array:
Array.from(liveCollection).forEach(el => {
    console.log('HTMLCollection (Array.from) item:', el.textContent);
});

// NodeList (static for querySelectorAll): Returned by querySelectorAll
const staticNodeList = document.querySelectorAll('.item');
console.log('Initial NodeList size:', staticNodeList.length); // e.g., 4

// Add another element after querySelectorAll was called
const anotherItem = document.createElement('h3');
anotherItem.className = 'item';
anotherItem.textContent = 'Item 5 (added later)';
document.body.appendChild(anotherItem);

// NodeList does NOT update automatically (for querySelectorAll)
console.log('Updated NodeList size (after another add):', staticNodeList.length); // Still 4!

// Iterating NodeList (can use forEach directly or convert to Array)
staticNodeList.forEach(el => {
    console.log('NodeList item (forEach):', el.textContent);
});

// To get an updated static NodeList, you must query again:
const updatedStaticNodeList = document.querySelectorAll('.item');
console.log('Re-queried NodeList size:', updatedStaticNodeList.length); // e.g., 5