Return to Home Page...

HTMLCollection vs Node List

HTMLCollection

An HTMLCollection is an array-like object of specified elements that allows those elements to be selected and modified using methods and properties. Any HTMLCollection that is on a page is live in the DOM, and updates when the document changes; this is useful for adding, repositioning, or removing nodes.

NodeList

A NodeList is an object that represents a collection of nodes, usually child nodes. 2 types of NodeLists exist, static and dynamic. Static NodeLists collect the information specified in a method, usually a 'document.querySelectorAll()' method, store that information, and keep it constant. Changes to the DOM do not affect static NodeLists. Dynamic NodeLists are less common than static ones, as HTMLCollections are usually used instead, but the same property is shared between the two, as they are both live lists that update as the DOM updates.

Differences & Similarities

The major difference between an HTMLCollection and a NodeList, is that the former is always dynamic, and adaptive to the DOM, while a NodeList is usually static. How these are created are also different, as an HTMLCollection is obtained by using the 'document.getElementsByTagName('')' method, while a NodeList is acquired from using the 'document.querySelectorAll' method. The primary similarity between the two is that they both store a collection of data based on an HTML element selector, such as 'li'.

Conclusion

Overall, an HTMLCollection and NodeList function very similarly. They both store data in array-like patterns, but one does so dynamically, changing with the DOM, while the other does not.

Sources

HTMLCollection- mdn web docs NodeList- mdn web docs