What's the difference between getElementsByClassName and querySelectorAll?

getElementsByClassName returns a live HTMLCollection that auto-updates, while querySelectorAll returns a static NodeList snapshot and accepts any CSS selector.

Live vs Static:

const liveList = document.getElementsByClassName("item");
const staticList = document.querySelectorAll(".item");

// Add new element with class "item"
document.body.innerHTML += '<div class="item">New</div>';

// Increased! (live)
console.log(liveList.length);
// Same (static snapshot)
console.log(staticList.length);

Tip: Use querySelectorAll for flexibility; use getElementsByClassName when you need live updates.