JavaScript querySelectorAll
last modified April 2, 2025
In this article, we explore the querySelectorAll method in
JavaScript. This powerful method allows developers to select multiple DOM
elements using CSS selectors, providing flexibility in element selection.
Basic Definition
The 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 is available on both the document object and individual
elements. It accepts any valid CSS selector as its parameter, making it
extremely versatile for DOM manipulation tasks.
Basic querySelectorAll
This example demonstrates how to select all elements with a specific class name.
<!DOCTYPE html>
<html>
<head>
<title>Basic querySelectorAll</title>
</head>
<body>
<p class="note">First note</p>
<p class="note">Second note</p>
<p class="note">Third note</p>
<script>
const notes = document.querySelectorAll('.note');
notes.forEach(note => {
console.log(note.textContent);
});
</script>
</body>
</html>
In this basic example, we have three paragraph elements with the class "note".
The JavaScript code selects all of them using querySelectorAll and
logs their text content to the console.
The method returns a NodeList, which is an array-like object that can be
iterated using forEach. This demonstrates the fundamental usage of
querySelectorAll to access multiple elements at once.
Selecting Multiple Element Types
This example shows how to select different types of elements with one call.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Element Types</title>
</head>
<body>
<h2>Section Title</h2>
<p class="intro">Introduction text</p>
<div id="content">Main content here</div>
<script>
const elements = document.querySelectorAll('h2, .intro, #content');
elements.forEach(el => {
el.style.color = 'blue';
});
</script>
</body>
</html>
Here we select an h2 element, an element with class "intro", and an element with
ID "content" in one querySelectorAll call. We then change their
text color to blue.
This demonstrates how querySelectorAll can accept multiple
selectors separated by commas, similar to CSS selector syntax. The returned
NodeList contains all matching elements in document order.
Nested Element Selection
This example demonstrates selecting elements within a specific container.
<!DOCTYPE html>
<html>
<head>
<title>Nested Selection</title>
</head>
<body>
<div id="container">
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
<p>Outside paragraph</p>
<script>
const container = document.getElementById('container');
const innerParagraphs = container.querySelectorAll('p');
innerParagraphs.forEach(p => {
p.style.fontWeight = 'bold';
});
</script>
</body>
</html>
In this example, we first select a container div, then use
querySelectorAll on that element to find all paragraph elements
within it. We make these paragraphs bold while leaving the outside one unchanged.
This shows how querySelectorAll can be called on specific elements
to search only within their descendants. This scoped searching is particularly
useful for component-based development.
Attribute Selectors
This example shows how to use attribute selectors with querySelectorAll.
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors</title>
</head>
<body>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<input type="submit" value="Login">
<script>
const textInputs = document.querySelectorAll('input[type="text"]');
textInputs.forEach(input => {
input.style.border = '2px solid green';
});
</script>
</body>
</html>
Here we select all input elements with type="text" using an attribute selector. We then add a green border to these specific input fields while leaving others unaffected.
This demonstrates the power of CSS-style attribute selectors with
querySelectorAll. You can use any CSS attribute selector pattern,
including partial matches like [name^="user"] for names starting
with "user".
Complex Selectors
This example demonstrates using complex CSS selectors with querySelectorAll.
<!DOCTYPE html>
<html>
<head>
<title>Complex Selectors</title>
</head>
<body>
<ul class="menu">
<li>Home</li>
<li class="active">Products</li>
<li>Services</li>
<li>Contact</li>
</ul>
<script>
const items = document.querySelectorAll('ul.menu li:not(.active)');
items.forEach(item => {
item.style.opacity = '0.7';
});
</script>
</body>
</html>
In this example, we select all list items within a ul.menu that don't have the "active" class. We then reduce their opacity to make the active item stand out.
This shows how querySelectorAll can handle complex CSS selectors
including combinators, pseudo-classes, and negation. The selector engine
supports nearly all CSS3 selector syntax for powerful element selection.
Source
MDN querySelectorAll Documentation
In this article, we have shown how to use querySelectorAll in
JavaScript. This method is essential for modern DOM manipulation and element
selection in web development, offering CSS selector flexibility.
Author
List all JS DOM tutorials.