|
| 1 | +--- |
| 2 | +Title: '.querySelectorAll()' |
| 3 | +Description: 'Selects multiple elements from the DOM that matches a specific CSS selector.' |
| 4 | +Subjects: |
| 5 | + - 'Code Foundations' |
| 6 | + - 'Computer Science' |
| 7 | + - 'Web development' |
| 8 | + - 'Web design' |
| 9 | + |
| 10 | +Tags: |
| 11 | + - 'Web API' |
| 12 | + - 'Conceptual' |
| 13 | + - 'DOM' |
| 14 | + - 'ES6' |
| 15 | +CatalogContent: |
| 16 | + - 'introduction-to-javascript' |
| 17 | + - 'paths/computer-science' |
| 18 | +--- |
| 19 | + |
| 20 | +The ``.querySelectorAll()`` method is a powerful tool in JavaScript for selecting multiple elements from the DOM that match a specified CSS selector. Unlike ``.querySelector()``, that returns only the first matching element, ``.querySelectorAll()`` returns a static NodeList containing all elements that match the given selector. |
| 21 | + |
| 22 | +This method is useful when you need to manipulate or interact with multiple elements at once, such as applying styles, adding event listeners, or updating content across several elements. |
| 23 | + |
| 24 | +## Syntax |
| 25 | + |
| 26 | + |
| 27 | +```javascript |
| 28 | +document.querySelectorAll(selector); |
| 29 | +``` |
| 30 | + |
| 31 | +`selector` is a string containing one or more CSS selectors separated by commas. This can include any valid CSS selector, such as class names, IDs, element types, attributes, etc. |
| 32 | + |
| 33 | + |
| 34 | +The `querySelectorAll` method returns a NodeList, which is a collection of nodes (elements) that match the specified selector(s). Note that a NodeList is not an array, but it can be iterated over using methods like forEach() or converted into an array using `Array.from()` |
| 35 | +. |
| 36 | +## Example |
| 37 | + |
| 38 | +Suppose you have the following HTML structure: |
| 39 | + |
| 40 | +```html |
| 41 | +<!DOCTYPE html> |
| 42 | +<html> |
| 43 | + <head> |
| 44 | + <title>Todolist</title> |
| 45 | + </head> |
| 46 | + <body> |
| 47 | + <ul> |
| 48 | + <li class="item">Go to the gym</li> |
| 49 | + <li class="item">Read for two hours</li> |
| 50 | + <li class="item">Call Jerry</li> |
| 51 | + <li class="item completed">Take a nap</li> |
| 52 | + </ul> |
| 53 | + </body> |
| 54 | +</html> |
| 55 | + |
| 56 | +``` |
| 57 | +You can use `.querySelectorAll()` to select all list items (`<li>`) with the class item and apply a style change to them: |
| 58 | + |
| 59 | + |
| 60 | +```javascript |
| 61 | +// Select all elements with the class "item" |
| 62 | +const items = document.querySelectorAll('.item'); |
| 63 | + |
| 64 | +// Loop through the NodeList and apply a style change |
| 65 | +items.forEach(item => { |
| 66 | + item.style.color = 'blue'; |
| 67 | +}); |
| 68 | +``` |
| 69 | + |
| 70 | +In this example: |
| 71 | + |
| 72 | +`.querySelectorAll('.item')` selects all `<li>` elements with the class item. |
| 73 | + |
| 74 | +The `forEach()` method is used to iterate over the NodeList and change the text color of each item to blue. |
| 75 | + |
| 76 | +You can also use more complex selectors. For instance, to select only the `<li>` elements with both the item and completed classes: |
| 77 | + |
| 78 | +```javascript |
| 79 | +const specialItem = document.querySelectorAll('.item.completed'); |
| 80 | +specialItem.forEach(item => { |
| 81 | + item.style.fontWeight = 'bold'; |
| 82 | + item.style.textDecoration = 'underline'; |
| 83 | +}); |
| 84 | + |
| 85 | +``` |
| 86 | + |
0 commit comments