document.querySelectorAll
Returns a static NodeList representing a list of the document's elements that match the specified group of CSS selectors
Syntax
document.querySelectorAll(selectors)Parameters
| Parameter | Type | Description |
|---|---|---|
| selectors | string | A string containing one or more CSS selectors to match |
Return Value
A non-live NodeList of matching Element objects
Examples
const items = document.querySelectorAll('.list-item')
items.forEach(item => console.log(item.textContent))const links = document.querySelectorAll<HTMLAnchorElement>('a[href^="https"]')
const urls = Array.from(links).map(a => a.href)
console.log(urls)const inputs = document.querySelectorAll('input[required]')
const allValid = Array.from(inputs).every(
(input) => (input as HTMLInputElement).checkValidity()
)Understanding document.querySelectorAll
The document.querySelectorAll method in JavaScript returns a static NodeList representing a list of the document's elements that match the specified group of CSS selectors. It belongs to the Document object and is one of the most widely used methods for working with document values in modern JavaScript and TypeScript applications.
The method signature is document.querySelectorAll(selectors). It accepts 1 parameter: selectors. When called, it returns a non-live nodelist of matching element objects. Understanding when and how to use querySelectorAll() helps you write more expressive, readable code.
Common use cases for document.querySelectorAll include data transformation, input validation, API response processing, and building reusable utility functions. It works well alongside related methods like dom-queryselector, dom-getelementsbyclassname, dom-getelementsbytagname, enabling you to chain operations together for complex data manipulation pipelines.
Browser support for document.querySelectorAll is excellent across all modern browsers including Chrome, Firefox, Safari, and Edge. It is also fully supported in Node.js and Deno. For older environments, transpilation with Babel or a polyfill may be needed.
Browser Compatibility
Supported in all modern browsers (Chrome, Firefox, Safari, Edge) and Node.js. Part of the ECMAScript standard.
Related Methods
document.querySelectorReturns the first Element within the document that matches the specified CSS selector, or null if no matches are found
document.getElementsByClassNameReturns a live HTMLCollection of all child elements which have all of the given class names
document.getElementsByTagNameReturns a live HTMLCollection of elements with the given tag name
More Document Methods
Other methods in the Document object
Related Tools
More Document Methods
Explore JavaScript Methods
Browse our complete reference of 410 JavaScript methods with syntax, examples, and explanations.