[HTML] HTMLCollection vs NodeList

HTMLCollection

The HTMLCollection interface represents a generic collection (array-like object similar to arguments) of elements (in document order) and offers methods and properties for selecting from the list.

An HTMLCollection in the HTML DOM is live; it is automatically updated when the underlying document is changed. For this reason it is a good idea to make a copy (e.g., using Array.from) to iterate over if adding, moving, or removing nodes.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

• document.getElementsByClassName
• document.getElementsByTagName

Try to avoid using those two methods, due to both return HTMLCollection.

 

NodeList

NodeList objects are collections of nodes, usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll().

This interface was an attempt to create an unmodifiable list and only continues to be supported to not break code that's already using it. Modern APIs represent list structures using types based on JavaScript arrays, thus making many array methods available, and at the same time imposing additional semantics on their usage (such as making their items read-only).

• document.querySelectorAll

Recommend to use this