03R - HTMLCollection vs NodeList

Define and Explain the HTMLCollection

An HTMLCollection is a list of nodes, and they are assumed to be live, so they are automatically updated when the underlying document is changed. An HTMLCollection contains HTML elements.

Define and Explain the NodeList

NodeLists provide the abstraction of an ordered collection of nodes. NodeLists can be both live and static. NodeLists contain all nodes.

Explain Differences and Similarities

HTMLCollections are live compared to NodeLists which are sometimes static. Methods for HTMLCollections include: getElementsByTagName, getElementsByClassName, document.forms, children. Methods for NodeLists include: querySelectorAll, childNodes, getElementsByName.

Summary of the Documentation

There doesn’t seem to be a ‘better’ option between HTMLCollection and Nodelist, and each should be used when the situation is appropriate. It’s important to remember that in general, an HTMLCollection is live, so it can change as you work with it, while a NodeList can be static, and may need to be refreshed.