How do you select by ID and class, and what is returned?

WHAT THIS TESTS: This question evaluates foundational DOM API literacy. At the senior level, interviewers still care that you can precisely name the legacy methods and, more importantly, that you understand the behavioral contract of the returned collection. The core concept is the live HTMLCollection versus static NodeLists or Arrays.

A GOOD ANSWER COVERS: A strong answer states that document.getElementById accepts a string ID and returns a single Element or null. It then states that document.getElementsByClassName accepts a string of one or more space-separated class names and returns an HTMLCollection. The candidate should explicitly note that this collection is live, meaning it automatically reflects DOM mutations without being requeried. A great answer adds that the collection is array-like but not an instance of Array, so it lacks native map or filter methods unless you borrow them via Array.prototype or convert it with Array.from.

COMMON WRONG ANSWERS: A common red flag is saying getElementsByClassName returns a NodeList or an Array. Another is claiming the collection is static, which would lead to bugs during iteration if the DOM changes underneath you. Some candidates only mention querySelector and querySelectorAll, which, while valid for selection, do not answer the specific question asked and miss the opportunity to demonstrate knowledge of live collections. Failing to mention that getElementById returns null when no match exists is also a minor gap.

LIKELY FOLLOW-UPS: The interviewer may ask how you would convert an HTMLCollection into a true Array and why you might need to do so. They might ask about the performance implications of live collections during long loops or whether querySelectorAll returns a live or static collection. Another follow-up is asking what happens when you call getElementsByClassName on an element rather than the document, which restricts the search to descendants.

ONE CONCRETE EXAMPLE: Imagine a todo list where each item has the class task. You call const tasks = document.getElementsByClassName('task') and then loop through the collection to remove completed items. Because the collection is live, every time you remove a task from the DOM, the HTMLCollection shrinks immediately. If you increment a standard index in a for loop, you will skip the next item. A senior candidate would flag this hazard and suggest iterating backwards or converting to a static array first.

Source: developer.mozilla.org