The HTMLCollection interface is a generic collection (array-like object) of elements in document order and offers methods/properties for selecting from the list. It automatically updates when the underlying document is changed. For this reason it is a good idea to use Array.from or something similar to iterate over if you changing node properties.
NodeList is a collection of objects called Nodes, returned by properties such as Node.childNodes and methods like document.querySelectorAll(). Despite the fact that it isn't an array, it is possible to iterate over it with forEach() and can be made into an array using Array.from(). Some older browsers have not implemented these features however. There are two forms of NodeLists. Live and Static. Live NodeLists automatically update the collection, and Static lists means changes in the DOM do not affect the collection. querySelectorAll returns a static NodeList.
NodeList and HTMLCollection both are collections of specific objects, HTML of elements, and NodeList of Nodes. Nodelists don't start out as an array like HTMLCollection does, but both can become arrays if necessary. NodeList has two types of lists, while HTMLCollection only has one.
We learned about the properties of HTMLCollection and NodeList, how they are both collections of specific objects, and how they compare and contrast with each other.