ElementquerySelectorAll

Element.querySelectorAll is a method on the Element interface that returns a static NodeList of descendant elements that match a given CSS selector within the element's subtree. It provides a scoped alternative to document.querySelectorAll, which searches the entire document.

Usage: It accepts a single string containing one or more CSS selectors separated by commas. The selectors follow standard CSS syntax and can target tag names, classes, IDs, attributes, pseudo-classes, and combinators. If the selector string is invalid, the method throws a SyntaxError.

Return value and characteristics: The result is a static NodeList, meaning it does not update automatically when the document structure changes. The NodeList can be iterated with forEach in modern environments, or converted to an array with Array.from(...) or [...nodeList].

Scope and examples: The search is restricted to the descendants of the element on which the method is called. To explicitly scope to the element itself, you can use the :scope pseudo-class, for example: element.querySelectorAll(':scope .child'). Example: document.getElementById('menu').querySelectorAll('.item.active').

Notes: This method is useful for modular scripts and components where you want to find elements within a specific container without affecting the rest of the document. It shares the same selector syntax as document.querySelectorAll but the scope is the element.