Element Selection APIs

Element selection APIs let frontend code locate DOM nodes using IDs, CSS selectors, tag names, classes, and related matching rules. The selected nodes can then be inspected, modified, or used as starting points for further DOM operations.

The DOM provides several APIs for finding elements. `document.getElementById()` targets one element by its `id`, while `querySelector()` accepts a CSS selector and returns the first matching element.

For collections, `querySelectorAll()` returns all elements matching a CSS selector. `getElementsByClassName()` and `getElementsByTagName()` also return collections, but their collection behavior differs from `querySelectorAll()`.

A selector passed to `querySelector()` or `querySelectorAll()` can express relationships and attributes, such as `.card`, `button`, `nav a`, or `[data-id="42"]`. These methods can also be called on an element rather than only on `document`, limiting the search to that element's descendants.

Selection can fail to find a node. Methods such as `querySelector()` and `getElementById()` return `null` when there is no match, so code that immediately accesses a property on the result can throw an error.

Key points

• Use `getElementById()` for a known unique `id`.
• Use `querySelector()` for the first match of a CSS selector.
• Use `querySelectorAll()` when all CSS-selector matches are needed.
• `getElementsByClassName()` and `getElementsByTagName()` return live `HTMLCollection` objects.
• Always account for a possible `null` result when selecting a single element.

Interview questions

What is the difference between `querySelector()` and `querySelectorAll()`?

`querySelector()` returns the first element matching a CSS selector, or `null` when there is no match. `querySelectorAll()` returns all matching elements as a `NodeList`. Use the first when one matching node is needed and the second when the complete set should be processed.

How would you select an element with a specific ID?

Use `document.getElementById('id')` when the element is identified by its ID. The method returns the matching element or `null` if there is no such element. An ID is intended to identify a single element within a document.

What does it mean that an `HTMLCollection` is live?

A live `HTMLCollection` automatically reflects relevant changes to the DOM. For example, adding or removing an element that matches a class can change the collection without calling the selection method again. This differs from the static `NodeList` returned by `querySelectorAll()`, whose membership does not automatically update after later DOM changes.

Can `querySelector()` be called on an element instead of `document`?

Yes. Selection methods such as `querySelector()` can be called on an element to search within its descendant subtree. This is useful when a component has a container and its selectors should not search the entire document. The selector still uses CSS selector syntax.

How would you choose between different element-selection APIs in production code?

I would choose based on the identity and cardinality of the target rather than using one API everywhere. For a unique known ID, `getElementById()` is explicit; for flexible structural or attribute matching, CSS selectors with `querySelector()` or `querySelectorAll()` are convenient. I would also consider scoping the search to a relevant container and handling missing elements. For collections, I would account for whether the API produces a live `HTMLCollection` or a static `NodeList`.