JavaScript: querySelectorAll

querySelectorAll() returns a collection of every element that matches a CSS selector.

Minimal example

const cards = document.querySelectorAll('.card');
cards.forEach(card => {
  card.classList.add('visible');
});

If there are no matches, the result is an empty NodeList, so a loop simply performs no work. The collection does not automatically include elements added later.

Common mistakes

• Use querySelector when you need only the first match.
• Do not assume the result is a full Array; convert it with Array.from when you need array-specific methods.
• Keep selectors readable and avoid building them from unsafe user input.