JavaScript querySelectorAll
last modified April 2, 2025
In this article, we explore the document.querySelectorAll method in
JavaScript. This powerful method allows developers to select multiple DOM elements
using CSS selectors, providing flexible element selection capabilities.
Basic Definition
The document.querySelectorAll method returns a static NodeList
representing a list of elements that match the specified group of selectors.
Unlike getElementById, it can select multiple elements at once.
This method accepts any valid CSS selector as its argument. It returns all elements that match the selector, not just the first one. The returned NodeList is not live, meaning it won't update automatically if the DOM changes.
Selecting Elements by Tag Name
This example demonstrates how to select all elements of a specific tag type.
<!DOCTYPE html>
<html>
<head>
<title>Selecting by Tag Name</title>
</head>
<body>
<p>First paragraph</p>
<p>Second paragraph</p>
<div>A div element</div>
<p>Third paragraph</p>
<script>
const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(p => {
console.log(p.textContent);
});
</script>
</body>
</html>
In this example, we use querySelectorAll('p') to select all
paragraph elements in the document. The method returns a NodeList containing all
matching elements, which we then iterate over using forEach.
This demonstrates the basic usage of querySelectorAll to select
elements by their tag name. The NodeList can be treated similarly to an array
for iteration purposes, though it doesn't have all array methods.
Selecting Elements by Class
This example shows how to select elements with a specific class name.
<!DOCTYPE html>
<html>
<head>
<title>Selecting by Class</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p class="highlight">Highlighted paragraph</p>
<div>Regular div</div>
<p class="highlight">Another highlighted paragraph</p>
<script>
const highlighted = document.querySelectorAll('.highlight');
highlighted.forEach(el => {
el.style.fontWeight = 'bold';
});
</script>
</body>
</html>
Here we select all elements with the class "highlight" using the CSS class
selector syntax (.highlight). We then modify each element's style
to make the text bold.
This example shows how querySelectorAll can be used with class
selectors to style multiple elements at once. The dot prefix indicates we're
selecting by class name rather than tag name.
Selecting Elements by Attribute
This example demonstrates selecting elements based on their attributes.
<!DOCTYPE html>
<html>
<head>
<title>Selecting by Attribute</title>
</head>
<body>
<input type="text" placeholder="Enter name">
<input type="password" placeholder="Enter password">
<input type="text" placeholder="Enter email">
<script>
const textInputs = document.querySelectorAll('input[type="text"]');
textInputs.forEach(input => {
input.style.border = '2px solid blue';
});
</script>
</body>
</html>
In this example, we use an attribute selector (input[type="text"])
to select all text input elements. We then apply a blue border to each of them.
This demonstrates how querySelectorAll can target elements based
on their attributes, providing precise control over element selection. Attribute
selectors are powerful for working with form elements in particular.
Complex Selectors
This example shows how to use complex CSS selectors with querySelectorAll.
<!DOCTYPE html>
<html>
<head>
<title>Complex Selectors</title>
</head>
<body>
<ul id="menu">
<li>Item 1</li>
<li class="special">Item 2</li>
<li>Item 3</li>
<li class="special">Item 4</li>
</ul>
<script>
const specialItems = document.querySelectorAll('#menu li.special');
specialItems.forEach(item => {
item.style.color = 'red';
});
</script>
</body>
</html>
Here we use a complex selector (#menu li.special) to select only
list items with class "special" that are children of the element with ID "menu".
We then change their text color to red.
This example demonstrates how querySelectorAll can combine multiple
selector types for precise element targeting. The method supports all CSS selector
syntax, allowing for sophisticated element selection.
Combining Multiple Selectors
This example shows how to select elements matching any of multiple selectors.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Selectors</title>
</head>
<body>
<h2>Section 1</h2>
<p>Paragraph in section 1</p>
<h3>Subsection</h3>
<p>Paragraph in subsection</p>
<h2>Section 2</h2>
<p>Paragraph in section 2</p>
<script>
const headings = document.querySelectorAll('h2, h3');
headings.forEach(heading => {
heading.style.textDecoration = 'underline';
});
</script>
</body>
</html>
In this example, we use a comma-separated list of selectors (h2, h3)
to select all h2 and h3 elements. We then underline each of these heading
elements.
This demonstrates how querySelectorAll can match elements against
multiple selectors in a single call. The comma operator works the same way as in
CSS, selecting elements that match any of the provided selectors.
Source
MDN querySelectorAll Documentation
In this article, we have shown how to use document.querySelectorAll
in JavaScript. This method is essential for modern DOM manipulation, offering
flexible element selection capabilities using CSS selectors.
Author
List all JS DOM tutorials.