diff --git a/content/javascript/concepts/dom-manipulation/terms/querySelectorAll/querySelectorAll.md b/content/javascript/concepts/dom-manipulation/terms/querySelectorAll/querySelectorAll.md new file mode 100644 index 00000000000..f49aec14fb1 --- /dev/null +++ b/content/javascript/concepts/dom-manipulation/terms/querySelectorAll/querySelectorAll.md @@ -0,0 +1,76 @@ +--- +Title: '.querySelectorAll()' +Description: 'Selects all DOM elements that match a specific CSS selector.' +Subjects: + - 'Code Foundations' + - 'Computer Science' + - 'Web Development' + - 'Web Design' +Tags: + - 'Conceptual' + - 'DOM' + - 'ES6' +CatalogContent: + - 'introduction-to-javascript' + - 'paths/front-end-engineer-career-path' +--- + +The **`.querySelectorAll()`** method selects all elements in the DOM that match a given CSS selector. Unlike `.querySelector()`, which returns only the first matching element, `.querySelectorAll()` returns a static NodeList containing every element that meets the criteria. + +This method is essential for manipulating or interacting with multiple elements simultaneously. It enables operations like applying styles, adding event listeners, or updating content across several elements at once. + +## Syntax + +```pseudo +document.querySelectorAll(selector); +``` + +- `selector`: A string containing one or more valid CSS selectors, separated by commas. These selectors can include class names, IDs, element types, attributes, and more. + +The method returns a NodeList of matching elements. Although a NodeList is not an array, it supports iteration with `forEach()` and can be converted to an array using `Array.from()`. + +## Example + +Given the following HTML structure for a todo list: + +```html + + +
+