03 - Research Documentation

An HTMLCollection is an interface that stores all the elements of a document in the order of their initial appearance within the document.

These elements can be interacted with from within the HTMLCollection list via utilization of methods and manipulation of properties.

Since interactions with the HTML DOM happen live, it is recommended that when items are added or moved, or nodes are removed, that a copy of the element(s) is/are created to hold the original data.

A NodeList contains a collection of all of the nodes within a selected space. To obtain all of the nodes on a page, the statement “document.querySelectorAll()” can be utilized.

The NodeList is not and array but acts like an array when iterated over via the statement “forEach()” or converted into an array with the statement “Array.from()”.

The two types of NodeLists are live and static. Live NodeLists update the NodeList collection as soon as the DOM is updated; whereas Static NodeLists do not reflect changes made to the DOM in the current NodeList collection.

HTMLCollection and NodeList contain a great deal of similarities as to how they operate, however quite different when it comes to what they provide.

HTMLCollection only works with elements and any changes made to the collection is live. A NodeList works with every type of node (not just element nodes) and depending on the statement utilized, the NodeList can be either static or live.

Overall, it seems that NodeLists potentially provide more flexibility as to how they are utilized and more versatile in the types of data that can be returned.

The DOM is an incredibly powerful model that can be probed and prodded to retrieve, append, or manipulate all data that exists within the HTML, JavaScript, and CSS of a webpage.

To retrieve accurate results, it’s important to know when to utilize the HTMLCollection command and the NodeList command, as utilizing the improper statement may yield incorrect results or invalidate the website entirely.

With a proper understanding of when and how to use either command, when it comes to website coding, the sky is the limit.