When we use element methods in JavaScript, like getElementsByClassName() and getElementsByTagName, the DOM returns a live HTMLCollection of only matching elements (excludes text nodes). Since it is live, it is automatically updated whenever the document is changed. The only property of the HTMLCollection is HTMLCollection.length and it returns the number of items in the collection. Coders can use HTMLCollection.item() access the node at the given index, similar to an array.
The NodeList is returned when using a query selector. The NodeList is static, meaning it will not update if more elements are added. The NodeList acts similarly to an array but is not actually an array. Like an array, the NodeList has a NodeList.length property to access the number of nodes in the list. The NodeList offers some other methods to access items in the list, iterate through the values, and more.
The HTMLCollection and NodeList both act very similarly to arrays. They are all zero based and have a length property to specify the number of items in them. One difference, however, is what each can access. While the HTMLCollection is limited to just elements, the NodeList can collect all types of nodes, including text nodes, in a document. Additionally, the HTMLCollection is a dynamic list that changes when more items are added.
Overall, it is important to understand how both HTMLCollection and NodeList work so we can utilize them in our code. We can use each like an array, but we must understand the differences and similarities to make them work properly and to their full potential.