Define/Explain the HTMLCollection
The HTMLCollection is an interface representing a group of HTML elements, with the item order being based on where the appear in the HTML. If you grab a group of elements from the HTML (like with the getElementsByClassName method), it will return a HTMLCollection. This HTMLCollection is live, meaning any changes in the HTML will also apply to the HTMLCollection.
Define/Explain the NodeList
The NodeList is an interface representing a group of DOM nodes. If you grab a group of nodes from the DOM (like with the querySelectorAll method), it will return a NodeList. There are two types of NodeList objects, live and static. Live NodeLists are dynamic, updating constantly to receive new information. Static NodeLists are the opposite, they don't change and update when there is new content.
Explain Differences and/or Similarities>
HTMLCollections and NodeLists share many similarities between them. The HTMLCollection interface and NodeList interface were both created for the same reason and are kept around today for the same reasons. Both were intended to be unmodifiable lists, and both are only around today to not break older websites that used them in the past. Both HTMLCollections and NodeLists come with built-in properties and methods. Though there are some differences between the two interfaces. Unlike some NodeLists, all HTMLCollections are live, meaning all HTMLCollections update when the DOM updates.
Summary of the Documentation
To summarize, HTMLCollections and NodeLists are both collections of objects. An HTMLCollection is a collection of HTML elements that is always dynamic and updates if there are any changees to the DOM. A NodeList is a colletion of DOM nodes that can be either live or static, depending on how the NodeList was created. While remarkably similar to one another, there are some key differences. It is also important to note that both HTMLCollections and NodeLists are not arrays, but they can be converted into an array with the Array.from() method.