JavaScript

querySelector & querySelectorAll

Complete guide to using document.querySelector() and document.querySelectorAll() to select DOM elements using CSS selectors in JavaScript.

What are querySelector and querySelectorAll?

document.querySelector() returns the first element that matches a CSS selector. document.querySelectorAll() returns a NodeList of all matching elements.

These methods are the modern replacement for older DOM selection methods like getElementById() and getElementsByClassName(), offering far more flexibility through CSS selector syntax.

Syntax

// Returns first match or null
const el = document.querySelector('selector');

// Returns NodeList (array-like) of all matches
const els = document.querySelectorAll('selector');

Selecting by ID, Class, and Tag

// By ID (returns single element)
const header = document.querySelector('#header');

// By class (first match only)
const btn = document.querySelector('.btn-primary');

// All elements with class
const items = document.querySelectorAll('.list-item');

// By tag name
const paragraphs = document.querySelectorAll('p');

Complex CSS Selectors

The real power of querySelector is using any valid CSS selector:

// Descendant selector
document.querySelector('div.container > p.intro');

// Attribute selector
document.querySelector('input[type="email"]');

// :nth-child pseudo-class
document.querySelectorAll('table tr:nth-child(even)');

// Comma-separated (multiple selectors)
document.querySelectorAll('h1, h2, h3');

// :not() pseudo-class
document.querySelectorAll('li:not(.hidden)');

Iterating Over querySelectorAll Results

The NodeList returned by querySelectorAll supports forEach and can be spread into an array:

// forEach (works directly on NodeList)
document.querySelectorAll('.card').forEach(card => {
  card.classList.add('active');
});

// Convert to array for map/filter/reduce
const texts = [...document.querySelectorAll('p')]
  .map(p => p.textContent);

// for...of loop
for (const el of document.querySelectorAll('.item')) {
  console.log(el.textContent);
}

querySelector vs getElementById

Feature	querySelector	getElementById
Selector type	Any CSS selector	ID only
Returns	First match / null	Element / null
Performance	Slightly slower	Fastest
Scope	Any element	document only
Use when	Complex selection needed	Selecting by known ID

Scoped Queries (Element.querySelector)

You can call querySelector on any element, not just document:

const nav = document.querySelector('nav');
const links = nav.querySelectorAll('a');  // only links inside nav

Common Mistakes

Forgetting the # for IDs: querySelector('myId') looks for a tag named myId. Use querySelector('#myId').

Treating NodeList as Array: querySelectorAll returns a NodeList, not an Array. Use [...nodeList] or Array.from() for array methods like map().

Static vs Live: querySelectorAll returns a static NodeList. Adding/removing DOM elements won't update it. Use getElementsByClassName if you need a live HTMLCollection.

Browser Support

querySelector and querySelectorAll are supported in all modern browsers including IE8+ (with limited CSS selector support in IE8). For modern applications, support is universal.

Last updated: 2026 • Browse all courses