HTML DOM Document querySelectorAll() Method
- Previous Page
- Next Page
- Go to Parent Directory HTML DOM Documents
Definition and usage
querySelectorAll()
The method returns all elements that match the CSS selector.
querySelectorAll()
The method returns a NodeList.
If the selector is invalid querySelectorAll()
The method will throw SYNTAX_ERR
Exception.
Instance
Example 1
Select all elements with class="example":
document.querySelectorAll(".example");
Example 2
Add background color to the first <p> element:
const nodeList = document.querySelectorAll("p"); nodeList[0].style.backgroundColor = "red";
Example 3
Add background color to the first <p> element with class="example":
const nodeList = document.querySelectorAll("p.example"); nodeList[0].style.backgroundColor = "red";
Example 4
Number of elements with class="example":
let numb = document.querySelectorAll(".example").length;
Example 5
Set the background color of all elements with class="example":
const nodeList = document.querySelectorAll(".example"); for (let i = 0; i < nodeList.length; i++) { nodeList[i].style.backgroundColor = "red"; }
Example 6
Set the background color of all <p> elements:
let nodeList = document.querySelectorAll("p"); for (let i = 0; i < nodeList.length; i++) { nodeList[i].style.backgroundColor = "red"; }
Example 7
Set the border of all <a> elements that use the "target" attribute:
const nodeList = document.querySelectorAll("a[target]"); for (let i = 0; i < nodeList.length; i++) { nodeList[i].style.border = "10px solid red"; }
Example 8
Set the background color of each <p> element that is a child of the <div> element:
const nodeList = document.querySelectorAll("div > p"); for (let i = 0; i < nodeList.length; i++) { nodeList[i].style.backgroundColor = "red"; }
Example 9
Set the background color of all <h3>, <div>, and <span> elements:
const nodeList = document.querySelectorAll("h3, div, span"); for (let i = 0; i < nodeList.length; i++) { nodeList[i].style.backgroundColor = "red"; }
Syntax
document.querySelectorAll(CSSselectors)
Parameter
Parameter | Description |
---|---|
CSSselectors |
Required. One or more CSS selectors. CSS selectors select HTML elements based on id, class, type, attributes, attribute values, etc. For a complete list, please visit our CSS Selector Reference Manual. For multiple selectors, separate each selector with a comma (see the example above). |
Return value
Type | Description |
---|---|
Object |
A NodeList object containing elements that match the CSS selector. If no match is found, an empty NodeList object is returned. |
The difference between HTMLCollection and NodeList
NodeList and HTMLcollection very similar.
Both are similar collections (lists) of nodes (elements) extracted from the document. Nodes can be accessed by index (index). The index starts from 0.
Both have length a property that returns the number of elements in the list (collection).
The HTMLCollection isDocument ElementSet.
NodeList isDocument NodeSet of (element nodes, attribute nodes, and text nodes).
HTMLCollection items can be accessed by their name, id, or index number.
NodeList items can only be accessed by their index number.
HTMLCollections are alwaysLiveSet.
For example, if an <li> element is added to the list in the DOM, the list in the HTMLCollection will also change.
NodeLists are usuallyStaticSet.
For example, if an <li> element is added to the list in the DOM, the list in the NodeList will not change.
getElementsByClassName()
and getElementsByTagName()
Methods all return live HTMLCollections.
querySelectorAll()
Methods return a static NodeList.
childNodes
Properties return a live NodeList.
Browser Support
document.querySelectorAll()
It is a DOM Level 3 (2004) feature.
All Browsers Support It:
Chrome | IE | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Chrome | IE | Edge | Firefox | Safari | Opera |
Support | 9-11 | Support | Support | Support | Support |
Related Pages
Tutorial:
querySelector Method:
Element querySelector() Method
Element querySelectorAll() Method
Document querySelector() Method
Document querySelectorAll() Method
Get Element Method:
Document getElementById() Method
- Previous Page
- Next Page
- Go to Parent Directory HTML DOM Documents