What are the key differences between NodeList and HTMLCollection?

WHAT THIS TESTS: Whether you understand the DOM collection contract and the performance and correctness implications of live versus static snapshots. Interviewers care if you know which APIs return live references that mutate underneath you and which return point-in-time copies, because this directly affects loop correctness, memory churn, and bug surface area in real applications.

A GOOD ANSWER COVERS: First, the core distinction that querySelectorAll returns a static NodeList while getElementsByTagName returns a live HTMLCollection. Second, that live collections automatically reflect DOM changes, so adding or removing nodes updates the collection immediately, whereas a static NodeList does not. Third, that NodeList has a nuanced exception: Node.childNodes is live, making it an important counterexample to the assumption that all NodeLists are static. Fourth, practical iteration advice, such as avoiding cached length variables when mutating a live collection inside a loop because the index boundaries shift dynamically. Fifth, that neither type is a true JavaScript array, but modern NodeLists support forEach and can be converted with Array.from.

COMMON WRONG ANSWERS: Claiming that every NodeList is static or that every NodeList is live. Asserting that querySelectorAll updates automatically when the DOM changes. Treating an HTMLCollection or NodeList as a full array and attempting to use methods like map or filter directly without conversion. Suggesting that live collections are always superior for performance without acknowledging their mutation hazards. Failing to mention childNodes as a live NodeList.

LIKELY FOLLOW-UPS: How would you safely remove every other element from a live HTMLCollection? When is it better to use a static NodeList over a live collection in a long-running component? What happens to iteration if you append a node inside a for loop over childNodes? Can you explain the historical reason NodeList exists alongside array-like structures in modern APIs?

ONE CONCRETE EXAMPLE: Imagine a parent element with two children. Calling parent.childNodes gives a live NodeList with length two. If you then call parent.appendChild to add a div, the same childNodes reference now reports length three without being reassigned. By contrast, calling document.querySelectorAll on those children returns a static NodeList with length two. Appending another matching child later leaves the original querySelectorAll result at length two, proving it captured a snapshot at the moment of the query.

Source: developer.mozilla.org