The Element.querySelectorAll() method returns a static NodeList of all descendant elements that match a CSS selector (MDN). No matches → an empty list (not null).
Pass the required arguments shown below. Check return values and browser support before you rely on the result.
Call el.querySelectorAll. Start with this line.
el.querySelectorAll(selectors)| Call | What it does |
|---|---|
el.querySelectorAll(selectors) | Primary signature. |
el.querySelectorAll(...) | Call with the arguments your case needs. |
Built into the browser. Call querySelectorAll(...) on an Element — no import required.
el.querySelectorAll(selectors)| Parameter | Description |
|---|---|
| Parent element | Required. Results are descendants of this node |
| selectors | Required. Valid CSS selector string |
| Return Value | Description |
|---|---|
| * | Static NodeList (may be empty) |
Get every .item under a list and report the count.
const list = document.getElementById("list");
const out = document.getElementById("out");
const matches = list.querySelectorAll(".item");
out.textContent = "count: " + matches.length;#list.".item" is valid CSS.length — 0 means no matches.forEach (MDN)Walk each match and build a simple report.
const list = document.getElementById("list");
const out = document.getElementById("out");
const lines = [];
list.querySelectorAll(".item").forEach((item) => {
lines.push(item.textContent);
});
out.textContent = lines.join(", ");querySelectorAll.forEach — MDN’s common looping pattern.textContent).Array.from(list) first.:scopeCount only direct child spans under the parent.
const parent = document.getElementById("parent");
const out = document.getElementById("out");
const kids = parent.querySelectorAll(":scope > span");
out.textContent = "direct spans: " + kids.length;:scope for the calling element.> combinator.Element.querySelectorAll() is Baseline Widely available on MDN (across browsers since July 2015). It is not Deprecated, Experimental, or Non-standard.
Collect all matching descendants as a static NodeList. Widely available since 2015.
Bottom line: Safe for modern browsers. Prefer querySelector when you only need the first match. See the MDN querySelectorAll() reference.
Continue with the Element releasePointerCapture() method.
14 people found this page helpful