3R - HTMLCollection vs NodeList

Define/Explain the HTMLCollection

An HTMLCollection is a list of nodes. They are assumed to be live meaning that they are automatically updated when the underlying document is changed. They may be accessed by the ordinal index or the node's name or ID attributes.

Define/Explain the NodeList

A NodeList is a collection of document nodes such as element nodes, attribute nodes, and text nodes. They can only be accessed by their index number. It can either be live or static and the changes to the DOM are either applied automatically to the collection or it doesn't affect the collection elements.

Explain Differences and/or Similarities

Differences between HTMLCollection and NodeList are that an HTMLCollection is always a live collection where as a NodeList is most often static. An HTMLCollection is a collection of document elements and a NodeList is a collection of document nodes such as element nodes, attribute nodes, and text nodes. The HTML collection can only be accessed by the name, id, or index number while NodeList can be accessed by their index number.

Similarities between HTMLCollection and NodeList are that both are array-like collections extracted from a document. Both have a length property.

Summary of the Documentation

In the end, one is general and one is a specific list of nodes. They both help the DOM render files on the browser.