HTML Collection

HTMLCollection is an array collection list containing HTML elements where the elements are accessed by the index starting at zero. HTMLCollections are able to be accessed by id,name or index number. HTMLCollection also are live collections therefore when you make a change to a element in the DOM it will change the HTMLCollection list.

Nodelist

A Nodelist object is a group of nodes from a document and is very similar to a HTMLCollection Object. With Nodelist objects browsers return a Nodelist object for the childNodes property and typically return a NodeList object in the querySelectorAll method. In a Nodelist the length property is used to declare the amount of nodes in a node list.

Differences & Similarities

HTMLCollection is similar to a Nodelist in the part that both have a length property that it used to return the number of elements in the list and both are array-like lists containing nodes (elements) found from a document where the index starts at zero and goes up. However, Nodelists are groups of document nodes (attribute,element and text nodes) while HTMLCollection is a group of document elements. Additionally, Nodelists are typically static collections and HTMLCollections are live connections.

Summary

HTMLCollections and Nodelists are very important to the DOM and allow you to have access to items using their index number,id, or name. In Nodelists however can only be accessed by index numbers. Both NodeLists and HTMLCOllections used the length property to return the elements in the list.