The Element.querySelector() method returns the first descendant of this element that matches a CSS selector (MDN). If nothing matches, it returns null.
Pass the required arguments shown below. Check return values and browser support before you rely on the result.
Call el.querySelector. Start with this line.
el.querySelector(selectors)| Call | What it does |
|---|---|
el.querySelector(selectors) | Primary signature. |
el.querySelector(...) | Call with the arguments your case needs. |
Built into the browser. Call querySelector(...) on an Element — no import required.
el.querySelector(selectors)| Parameter | Description |
|---|---|
| Parent element | Required. Search is limited to its descendants |
| selectors | Required. Valid CSS selector string |
| Return Value | Description |
|---|---|
| * | First match, or null |
Find the first .item inside a list container.
const list = document.getElementById("list");
const out = document.getElementById("out");
const first = list.querySelector(".item");
out.textContent = first ? first.textContent : "null";#list.".item" is valid CSS..item nodes are ignored.textContent.:scope (MDN)Use :scope > so only direct children can match.
const parent = document.getElementById("parent");
const out = document.getElementById("out");
const child = parent.querySelector(":scope > span");
out.textContent = child ? child.textContent : "null";:scope for the calling element.> combinator.Always handle the no-match case.
const box = document.getElementById("box");
const out = document.getElementById("out");
const found = box.querySelector(".missing");
out.textContent = found === null ? "null" : found.textContent;null — not an exception.=== null before using the node.SyntaxError.Element.querySelector() is Baseline Widely available on MDN (across browsers since July 2015). It is not Deprecated, Experimental, or Non-standard.
Find the first matching descendant with CSS selectors. Widely available since 2015.
Bottom line: Safe for modern browsers. Prefer querySelector for one match; use querySelectorAll when you need every match. See the MDN querySelector() reference.
Continue with the Element querySelectorAll() method.
14 people found this page helpful