|
1 |
| ---- |
2 |
| -Title: '.querySelectorAll()' |
3 |
| -Description: 'Returns a static (non-live) NodeList of all elements in the document that match the specified CSS selectors.' |
4 |
| -Subjects: |
5 |
| - - 'Code Foundations' |
6 |
| - - 'Developer Tools' |
7 |
| - - 'Web Development' |
8 |
| -Tags: |
9 |
| - - 'Methods' |
10 |
| - - 'Node' |
11 |
| - - 'Selectors' |
12 |
| -CatalogContent: |
13 |
| - - 'introduction-to-javascript' |
14 |
| - - 'paths/front-end-engineer-career-path' |
15 |
| ---- |
16 |
| - |
17 |
| -The document method **`querySelectorAll()`** returns a static (not live) `NodeList` of all elements that match the specified group of selectors. |
18 |
| - |
19 |
| -## Syntax |
20 |
| - |
21 |
| -```pseudo |
22 |
| -querySelectorAll(selectors); |
23 |
| -``` |
24 |
| - |
25 |
| -- `selectors`: A string containing one or more CSS selectors used to match elements in the document. It follows the same rules as CSS [selectors](https://www.codecademy.com/resources/docs/css/selectors) and can include: |
26 |
| - - Type selectors (`div`, `p`, `span`) |
27 |
| - - Class selectors (`.class-name`) |
28 |
| - - ID selectors (`#id-name`) |
29 |
| - - Attribute selectors (`[type="text"]`, `[disabled]`) |
30 |
| - - Combinations (`div p`, `.container > p`, `ul > li:first-child`) |
31 |
| - |
32 |
| -## Examples |
33 |
| - |
34 |
| -### Example 1 |
35 |
| - |
36 |
| -In this example, a `NodeList` of all `<p>` elements in the document is obtained: |
37 |
| - |
38 |
| -```js |
39 |
| -const matches = document.querySelectorAll("p"); |
40 |
| -``` |
41 |
| - |
42 |
| -### Example 2 |
43 |
| - |
44 |
| -This example returns a list of all `<div>` elements in the document with a class of either `note` or `alert`: |
45 |
| - |
46 |
| -```js |
47 |
| -const matches = document.querySelectorAll("div.note, div.alert"); |
48 |
| -``` |
49 |
| - |
50 |
| -### Example 3 |
51 |
| - |
52 |
| -In this example, we get a list of `<p>` elements whose immediate parent is a `<div>` with the class `highlighted`, and which are inside a container with the ID `test`: |
53 |
| - |
54 |
| -```js |
55 |
| -const container = document. querySelector("#test"); |
56 |
| -const matches = container.querySelectorAll("div.highlighted > p"); |
57 |
| -``` |
| 1 | +--- |
| 2 | +Title: '.querySelectorAll()' |
| 3 | +Description: 'Returns a static (non-live) NodeList of all elements in the document that match the specified CSS selectors.' |
| 4 | +Subjects: |
| 5 | + - 'Code Foundations' |
| 6 | + - 'Developer Tools' |
| 7 | + - 'Web Development' |
| 8 | +Tags: |
| 9 | + - 'Methods' |
| 10 | + - 'Node' |
| 11 | + - 'Selectors' |
| 12 | +CatalogContent: |
| 13 | + - 'introduction-to-javascript' |
| 14 | + - 'paths/front-end-engineer-career-path' |
| 15 | +--- |
| 16 | + |
| 17 | +The document method **`querySelectorAll()`** returns a static (not live) `NodeList` of all elements that match the specified group of selectors. |
| 18 | + |
| 19 | +## Syntax |
| 20 | + |
| 21 | +```pseudo |
| 22 | +querySelectorAll(selectors); |
| 23 | +``` |
| 24 | + |
| 25 | +- `selectors`: A string containing one or more CSS selectors used to match elements in the document. It follows the same rules as CSS [selectors](https://www.codecademy.com/resources/docs/css/selectors) and can include: |
| 26 | + - Type selectors (`div`, `p`, `span`) |
| 27 | + - Class selectors (`.class-name`) |
| 28 | + - ID selectors (`#id-name`) |
| 29 | + - Attribute selectors (`[type="text"]`, `[disabled]`) |
| 30 | + - Combinations (`div p`, `.container > p`, `ul > li:first-child`) |
| 31 | + |
| 32 | +## Examples |
| 33 | + |
| 34 | +### Example 1 |
| 35 | + |
| 36 | +In this example, a `NodeList` of all `<p>` elements in the document is obtained: |
| 37 | + |
| 38 | +```js |
| 39 | +const matches = document.querySelectorAll('p'); |
| 40 | +``` |
| 41 | + |
| 42 | +### Example 2 |
| 43 | + |
| 44 | +This example returns a list of all `<div>` elements in the document with a class of either `note` or `alert`: |
| 45 | + |
| 46 | +```js |
| 47 | +const matches = document.querySelectorAll('div.note, div.alert'); |
| 48 | +``` |
| 49 | + |
| 50 | +### Example 3 |
| 51 | + |
| 52 | +In this example, we get a list of `<p>` elements whose immediate parent is a `<div>` with the class `highlighted`, and which are inside a container with the ID `test`: |
| 53 | + |
| 54 | +```js |
| 55 | +const container = document.querySelector('#test'); |
| 56 | +const matches = container.querySelectorAll('div.highlighted > p'); |
| 57 | +``` |
0 commit comments