document.querySelectorAll()

// Retrieves from the entire document.
var elements = document.querySelectorAll("selector");

// Retrieves from within a specific HTML element.
var elements = parentElement.querySelectorAll("selector");

Returns a NodeList object containing all HTML elements that match the condition. The NodeList object can be treated like an array. If no matching HTML elements exist, an empty NodeList is returned.

sample_querySelectorAll.html

<ul id="sorcerers">
	<li class="member grade-special">Gojo Satoru</li>
	<li class="member grade-1">Ryomen Sukuna</li>
	<li class="member grade-1">Itadori Yuji</li>
	<li class="member grade-1">Fushiguro Megumi</li>
	<li class="member grade-1">Kugisaki Nobara</li>
</ul>

sample_querySelectorAll.js

// Pattern 1: Get all elements by class name
var members = document.querySelectorAll(".member");
console.log(members.length); // Outputs "5"

// Pattern 2: Loop through with forEach
members.forEach(function(el) {
	console.log(el.textContent);
});
// Outputs "Gojo Satoru", "Ryomen Sukuna", "Itadori Yuji", "Fushiguro Megumi", "Kugisaki Nobara" in order.

// Pattern 3: Filter by a more specific class
var grade1 = document.querySelectorAll(".grade-1");
console.log(grade1.length); // Outputs "4"

// Pattern 4: Access a specific element by index
var first = document.querySelectorAll(".member")[0];
console.log(first.textContent); // Outputs "Gojo Satoru"

// Pattern 5: When no element matches, an empty NodeList is returned (not null)
var none = document.querySelectorAll(".nonexistent");
console.log(none.length); // Outputs "0"
if (none.length > 0) {
	// Handle found elements
}

View sample page

document.querySelectorAll() is a method that retrieves all HTML elements matching a condition as a NodeList. While document.querySelector() returns only the first match, this method returns all matching HTML elements.

The returned NodeList is an array-like object that supports the length property and index-based access. You can also iterate over it using the forEach() method.

Note that the NodeList is a snapshot taken at the time of the call and will not automatically reflect HTML elements added to the DOM afterward. To get the latest state, you need to call document.querySelectorAll() again.

document.querySelectorAll() is covered in more detail in the tutorial article querySelector() — Selecting Elements with CSS Selectors. Feel free to check it out.