Differences Between NodeList And HTMLCollection: Simplest Explanation

Differences Between NodeList And HTMLCollection: Simplest Explanation

·

1 min read

In this post, I will explain the difference between NodeList and HTMLCollection in the simplest possible way.

What Is The Difference Between A NodeList versus A HTMLCollection?

For the most part, nothing.

You can think of both of these things just a collection or (imperfectly) "array" of elements.

Where Does It Matter?

NodeList and HTMLCollection difference will matter when you are querying for elements.

For example, in the above example, we are using both document.queryselectorAll() and document.getElementsByClass() to get all elements with a class of myclass.

In both cases, the same elements are returned.

However, for document.querySelectorAll() the elements returned are in a NodeList. For getElementsByClassName(), the (same) elements are in a HTMLCollection.

Side Notes

As you can also see, the properties such as length or which elements are in the collection are the same in both cases.

In summary, for the most part HTMLCollection and NodeList are the same except when you are querying elements; for that, depending on which query you perform, the results are contained in a different type of object.