HTMLCollection vs NodeList

HTMLCollection

The HTMLCollection is a collection of elements not unlike an array. However, unlike an array the HTMLCollection is live. This means that whenever elements that are contained inside the HTMLCollection are changed the HTMLCollection will automatically update. Elements contained in the HTMLCollection can be accessed via element name or via its index in the HTMLCollection.

NodeList

A Nodelist is an object that contains multiples nodes (elements). When that node is called you are able to get the node itself or the properties of that node such as childenodes are methods related to the node. There are two types of Nodelists which are live and static. Live Nodelists are automatically updated as the DOM is changed. Static Nodelists are not affected when changes in the DOM are made.

Differences and Similarities

Both HTMLCollections and Nodelists are collections of DOM nodes. HTMLCollections and Nodelists are live collections that are updated automatically when the DOM is changed, however, a Nodelist can also be static meaning that even if the DOM is changed the Nodelist will remain the same. Nodelists are made to contain any type of node while HTMLCollects are mainly for holding collections of element nodes.

Summary of Documentation

HTMLCollections and Nodelists are two different ways to hold collections of DOM nodes. Both collections are updated automatically when the DOM changes, however, a Nodelist has the choice to be static instead. HTMLCollections are mostly used for element nodes and Nodelists are generally used for any node type.