JS getElementsByClassName vs querySelector Guide

// Select all elements with the class "card"
const cards = document.getElementsByClassName("card");
 
console.log(cards.length); // 3
 
// Add a new card to the DOM
const newCard = document.createElement("div");
newCard.className = "card";
document.body.appendChild(newCard);
 
console.log(cards.length); // 4 (auto-updated!)

// Only elements with BOTH "card" and "featured" classes
const featuredCards = document.getElementsByClassName("card featured");
 
console.log(featuredCards.length);

// Select first element with class "card"
const firstCard = document.querySelector(".card");
 
// Select ALL elements with class "card"
const allCards = document.querySelectorAll(".card");
 
console.log(allCards.length); // 3
 
// Add a new card to the DOM
const newCard = document.createElement("div");
newCard.className = "card";
document.body.appendChild(newCard);
 
console.log(allCards.length); // Still 3 (static snapshot!)

// Compound selectors
const activeNavLink = document.querySelector("nav a.active");
 
// Attribute selectors
const emailInput = document.querySelector('input[type="email"]');
 
// Pseudo-class selectors
const firstItem = document.querySelector("li:first-child");
 
// Descendant combinators
const nestedSpan = document.querySelector(".card > .header span");

const items = document.getElementsByClassName("item");
 
console.log(items.length); // 5
 
// Remove the first item's class
items[0].classList.remove("item");
 
console.log(items.length); // 4 (element left the collection!)
console.log(items[0]);     // Now points to what was items[1]

const items = document.getElementsByClassName("highlight");
 
// BUG: Skips every other element!
for (let i = 0; i < items.length; i++) {
  items[i].classList.remove("highlight");
  // After removing class, collection shrinks and indexes shift
}
 
// FIX 1: Loop backwards
for (let i = items.length - 1; i >= 0; i--) {
  items[i].classList.remove("highlight");
}
 
// FIX 2: Convert to array first
const itemsArray = Array.from(items);
itemsArray.forEach(item => item.classList.remove("highlight"));

const items = document.querySelectorAll(".item");
 
console.log(items.length); // 5
 
// Remove the first item's class
items[0].classList.remove("item");
 
console.log(items.length); // Still 5
console.log(items[0]);     // Still the same element

const items = document.querySelectorAll(".highlight");
 
// Works perfectly, no shifting issues
items.forEach(item => item.classList.remove("highlight"));

// Performance test: selecting 10,000 elements
const iterations = 100000;
 
// getElementsByClassName
console.time("getElementsByClassName");
for (let i = 0; i < iterations; i++) {
  document.getElementsByClassName("test-item");
}
console.timeEnd("getElementsByClassName");
 
// querySelectorAll
console.time("querySelectorAll");
for (let i = 0; i < iterations; i++) {
  document.querySelectorAll(".test-item");
}
console.timeEnd("querySelectorAll");

// Scenario: Filtering a table with 5,000 rows on every keystroke
function filterTable(searchTerm) {
  // Prefer getElementsByClassName here for speed
  const rows = document.getElementsByClassName("table-row");
 
  for (let i = 0; i < rows.length; i++) {
    const text = rows[i].textContent.toLowerCase();
    rows[i].style.display = text.includes(searchTerm) ? "" : "none";
  }
}
 
// For a one-time setup, querySelector is perfectly fine
const header = document.querySelector(".table-header .sort-button");
header.addEventListener("click", handleSort);

// Complex selectors: querySelector wins
const activeTab = document.querySelector(".tabs > .tab.active");
const checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');
const oddRows = document.querySelectorAll("tr:nth-child(odd)");

// Live collection: getElementsByClassName wins
const notifications = document.getElementsByClassName("unread");
 
// Check count updates automatically as notifications are read
function updateBadge() {
  badge.textContent = notifications.length;
}

// WRONG: Missing the dot prefix
const cards = document.querySelectorAll("card"); // Selects <card> elements!
 
// CORRECT: Dot prefix for class names
const cards = document.querySelectorAll(".card");

const items = document.getElementsByClassName("item");
 
// WRONG: forEach doesn't exist on HTMLCollection
items.forEach(item => console.log(item)); // TypeError!
 
// CORRECT: Convert to array first
Array.from(items).forEach(item => console.log(item));
 
// CORRECT: Use a for loop
for (let i = 0; i < items.length; i++) {
  console.log(items[i]);
}
 
// CORRECT: Use spread operator
[...items].forEach(item => console.log(item));

const items = document.getElementsByClassName("removable");
 
// BUG: length changes as items are removed
const len = items.length;
for (let i = 0; i < len; i++) {
  items[i].remove(); // After first removal, indexes shift!
}
 
// FIX: Loop backwards or convert to array
while (items.length > 0) {
  items[0].remove();
}

function createTagFilter(containerSelector) {
  const container = document.querySelector(containerSelector);
  const filterButtons = container.querySelectorAll(".filter-btn");
  
  // Live collection auto-updates when cards are added/removed
  const allCards = document.getElementsByClassName("product-card");
 
  filterButtons.forEach(button => {
    button.addEventListener("click", () => {
      const tag = button.dataset.tag;
 
      // Update active button (static selection is fine here)
      filterButtons.forEach(btn => btn.classList.remove("active"));
      button.classList.add("active");
 
      // Filter cards using the live collection
      for (let i = 0; i < allCards.length; i++) {
        const card = allCards[i];
        const cardTags = card.dataset.tags.split(",");
 
        if (tag === "all" || cardTags.includes(tag)) {
          card.style.display = "";
        } else {
          card.style.display = "none";
        }
      }
 
      // Update count (live collection length is always current)
      const visibleCount = container
        .querySelectorAll('.product-card:not([style*="display: none"])')
        .length;
      
      document.querySelector(".result-count").textContent =
        `${visibleCount} of ${allCards.length} products`;
    });
  });
}
 
createTagFilter("#shop");