HTMLCollection v NodeList

HTMLCollection

According to the MDN, "The HTMLCollection interface represents a generic collection (array-like object similar to arguments) of elements (in document order) and offers methods and properties for selecting from the list." This essentially means that the HTMLCollection is a list of the nodes in the HTML document. The HTMLCollection is a live feed of the page, meaning it updates when changes are made to it.

NodeList

Similar to HTMLCollection, NodeList provides a collection of nodes from the document. NodeList can be static or live, which means the changes in static aren't updated live with the DOM, but the changes in live are updated. A quick note from the MDN, "Although NodeList is not an Array, it is possible to iterate over it with forEach()."

Differences & Similarities

While these two objects are very similar in function, there are slight differences to them. For instance, the NodeList object can be live or static, while the HTMLCollection remains live at all times. Essentially, HTMLCollection is good for requiring updated parts of the page when the script enacts them, while NodeList is good for not needing the updated material to make changes.

Summary

Both HTMLCollection and NodeList are objects that benefit the developer in locating and iterating through elements and content on the page. It allows you to grab and update, add to, or delete pieces depending on what the script is designed to do, whether it be on clicks or during loops.