How do you select elements from the DOM?

beginner

Re-explain

Use querySelector() for the first element that matches a CSS selector, and querySelectorAll() for every match. The older getElementById(), getElementsByClassName() and getElementsByTagName() each select by one thing.

querySelector() returns the first match, or null if nothing matches. querySelectorAll() returns a static NodeList that does not change afterwards. Both accept any CSS selector, such as #myId .myClass, which makes them the most flexible choice.

getElementById() is the direct way to find a single element by its ID. getElementsByClassName() and getElementsByTagName() return a live HTMLCollection, which updates by itself as the DOM changes. That can surprise you in a loop that adds or removes matching elements.

// By ID
document.getElementById('myId');
// By class
document.getElementsByClassName('myClass');
document.querySelector('.myClass');
document.querySelectorAll('.myClass');
// By tag
document.getElementsByTagName('div');
// By CSS selector
document.querySelector('#myId .myClass');

Rewriting in plainer words…

This answer doesn't lend itself to a diagram - it reads best . No credits were charged.

Why there's no diagram: “”

The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓

The diagram below the answer is the concept . Jump to it ↓

Tailored explanation · switch back to · ·

What should the new diagram focus on?

Guided practice for JavaScript One question at a time. Answer out loud, get graded, see what you missed.

How well did you know this?

AI:

Saved in this browser - sign in to keep your review list.

How should your speech become text?

Listening… your words appear above as you speak - tap Stop when you're done.

Recording · cr - tap Stop & transcribe when you're done.

Transcribing with AI…

Voice:

Keep going - a few more words and AI can grade it.

Interview lens How interviewers actually use this question

Likely follow-ups

What's the difference between a live HTMLCollection and a static NodeList, and when does it matter? Show a loop that removes matches from a live collection and skips items. Then fix it with a static list or a backwards loop.
How would you search only inside one component instead of the whole document? Call querySelector on an element instead of on document, so it returns only that element's descendants. Bonus if you know that :scope ties the selector to that element.
How do you loop over the result of querySelectorAll, and can you call map on it? A NodeList has forEach but no map or filter. Convert it with Array.from or spread when you need array methods.
You have a list of 500 buttons. Would you select each one and attach a listener? A strong answer names event delegation. Put one listener on the parent, then use event.target.closest() to find the button that was clicked.
Your script calls querySelector and gets null for an element that exists in the HTML. Why? The script ran before the parser reached that element. Fix it with defer, a script at the end of body, or by waiting for DOMContentLoaded.

What you can say

I mostly use querySelector, which returns the first element matching a CSS selector, and querySelectorAll, which returns every match.
Because they take any CSS selector, like '#myId .myClass', they're the most flexible option. If nothing matches, querySelector returns null.
querySelectorAll gives back a static NodeList. It's a snapshot, so it doesn't change when the DOM changes later.
The older methods each select by one thing. getElementById is the direct way to get a single element by its ID.
getElementsByClassName and getElementsByTagName return a live HTMLCollection, which updates by itself as the DOM changes.
That live list can surprise you in a loop that adds or removes matching elements, so in that case I use the static list from querySelectorAll.

Weak answers to avoid

Lists method names but not what they return The interviewer wants to know what comes back for each method. That's null when nothing matches, a static NodeList, or a live HTMLCollection.
Treats NodeList and HTMLCollection as arrays Neither one is an array. HTMLCollection has no forEach and NodeList has no map. Mention Array.from or spread when you need array methods.
Misses the live collection trap If you remove items while looping over a live HTMLCollection, the indexes shift and elements get skipped. Name that risk, then give the fix: a static list or a backwards loop.
Forgets that querySelector can return null If nothing matches, calling a method on the result throws a TypeError. Say that you check for null or use optional chaining.

Interview lens

Likely follow-ups, what you can say, and the weak answers to avoid.

Want a quick review of the fundamentals? See the JavaScript cheatsheet.

← Back to all JavaScript questions

Pro · $10/mo

110 of 126 JavaScript answers are in Pro.

Full answers, code samples, and AI explanations that go simpler or deeper. Cancel anytime.

Full answers + code
AI explanations, simpler or deeper
1,000 AI credits / month
Cancel anytime

Get Pro → See plans & pricing →