document.querySelector() Query with CSS selector
Last updated: 2026-09-09
document.querySelector() Query with CSS selector
querySelector gets the first element matching a CSS selector.
| Category | DOM |
|---|---|
| ES version | DOM |
📝 Syntax
document.querySelector('.myClass');⚙️ Parameters
| selector | Any valid CSS selector. |
|---|
Returns：The first match or null.
Mutates the original：No (returns a new value)
▶ Example
Edit the code, press Run, and see the result in the output panel:
Output：
(element or null)💡 Tip querySelector supports all CSS selectors — more versatile.
ℹ️ info Returns only the first match — use querySelectorAll for all.
🌐 Browser support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| document.querySelector() | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported by all modern browsers | |||||
🏷️ Related Items
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
❓ FAQ
QquerySelector vs querySelectorAll?
AquerySelector returns first; querySelectorAll returns all as NodeList.
QWhat selectors are supported?
AAll CSS selectors.
QWhat if no match?
AReturns null.
