HTMLCollection vs NodeList

HTMLCollection

According to the MDN WebDocs, the HTMLCollection object references a collection of HTML objects in the document that meet certain criteria. As elements that meet that criteria are added or removed, the corresponding HTMLCollection object will be updated accordingly.

Because this collection object is dynamic and automatically-updated by the JavaScript runtime as the DOM changes, the MDN WebDocs recommends copying the list using Array.from before making any modifications.

NodeList

Although NodeLists can be static or dynamic, but they are usually static. The main case where NodeLists can be dynamic is when the Node.childNodes method is called, which returns a read-only (but dynamic object). The main case where NodeLists can be static is when the querySelectorAll method is called.

Differences Between HTMLCollection and NodeList

Although HTMLCollections and NodeLists are both collections of objects, the main difference between the two is that HTMLCollections are always dynamic. They are returned when a specific criterion is provided to the DOM, and the DOM will listen for changes to that criterion and update the referenced object accordingly. On the other hand, NodeLists are normally static in nature, but they can be dynamic if they reference a static object (such as a parent node).

Summary

Whether or not you should use HTMLCollection or NodeList objects in your JavaScript programming to reference DOM elements is mostly a matter of preference. However, you should be aware of how they work under-the-hood in case you run into any unexpected behavior. It also helps to maintain consistency throughout your code, and create documentation where applicable.