Document: querySelectorAll() method
===================================

 The `Document` method **`querySelectorAll()`**
 returns a static (not live) `NodeList` representing a list of the
 document's elements that match the specified group of selectors.

Syntax
------


```js
querySelectorAll(selectors)
```

### Parameters

`selectors`

 A string containing one or more selectors to match against. This
 string must be a valid CSS selector
 string; if it's not, a `SyntaxError` exception is thrown. See Locating DOM elements using selectors for more information about using selectors to
 identify elements. Multiple selectors may be specified by separating them using
 commas.




**Note:** Characters which are not part of standard CSS syntax must be
 escaped using a backslash character. Since JavaScript also uses backslash escaping,
 special care must be taken when writing string literals using these characters. See Escaping special characters for more information.


### Return value

 A non-live `NodeList` containing one `Element` object for
 each element that matches at least one of the specified selectors or an empty
 `NodeList` in case of no matches.


**Note:** If the specified `selectors` include a CSS pseudo-element, the returned list
 is always empty.


### Exceptions

`SyntaxError` `DOMException`

Thrown if the syntax of the specified `selectors` string is not valid.

Examples
--------

### Obtaining a list of matches

 To obtain a `NodeList` of all of the `<p>` elements in the
 document:


```js
const matches = document.querySelectorAll("p");
```


 This example returns a list of all `<div>` elements within the document
 with a class of either `note` or `alert`:


```js
const matches = document.querySelectorAll("div.note, div.alert");
```


 Here, we get a list of `<p>` elements whose immediate parent element
 is a `<div>` with the class `highlighted` and which are
 located inside a container whose ID is `test`.


```js
const container = document.querySelector("#test");
const matches = container.querySelectorAll("div.highlighted > p");
```


 This example uses an attribute selector to return a list of the `<iframe>` elements in the
 document that contain an attribute named `data-src`:


```js
const matches = document.querySelectorAll("iframe[data-src]");
```


 Here, an attribute selector is used to return a list of the list items contained within
 a list whose ID is `userlist` which have a `data-active` attribute
 whose value is `1`:


```js
const container = document.querySelector("#userlist");
const matches = container.querySelectorAll("li[data-active='1']");
```

### Accessing the matches

 Once the `NodeList` of matching elements is returned, you can examine it
 just like any array. If the array is empty (that is, its `length` property is
 0), then no matches were found.

 Otherwise, you can use standard array notation to access the contents of the list. You
 can use any common looping statement, such as:


```js
const highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach((userItem) => {
  deleteUser(userItem);
});
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-queryselectorall① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Locating DOM elements using selectors
* Attribute selectors in the CSS
 Guide
* Attribute selectors in the MDN Learning Area
* `Element.querySelector()` and `Element.querySelectorAll()`
* `Document.querySelector()`
* `DocumentFragment.querySelector()` and
 `DocumentFragment.querySelectorAll()`