HTMLCollection

An HTMLCollection is an array-like list of document elements. HTMLCollections have a length property and two methods associated with them. They are item and namedItem. An HTMLCollection acts like an array, but it isn't one. HTMLCollection items can be accessed by their name, index number, or id. An HTMLCollection is always a live collection meaning that if an element is added to the dom the HTMLCollection will be aware of it and update accordingly. The getElementsByClassName() and getElementsByTagName() methods return HTMLCollections.

NodeList

A NodeList is a collection of document nodes (element nodes, attribute nodes, and text nodes). Unlike HTMLCollections NodeLists are static. Meaning that if node is added the NodeList doesn't care. It's a one-time list and doesn't update. Like the HTMLCollection a NodeList is an array-like list also and has a length property too. But unlike the HTMLCollection NodeList items can only be accessed by their index number. The querySelectorAll() method returns a static NodeList And the childNodes property returns a live NodeList.

Differences and/or Similarities

Both are array-like collections, both can be accessed by their index numbers that like arrays start at 0, and both have length properties. That pretty much sums up their similarities. HTMLCollections are lists of elements, and NodeLists are collecions of nodes. HTMLCollections are always dynamic, and NodeLists are static.

Summary

Both NodeLists and HTMLCollections are useful for gathering and manipulating objects in the DOM.