HTMLCollection and NodeList
When working with the DOM in JavaScript, multiple selected HTML elements are often returned at once. These returned elements form a collection known as a DOM collection, which includes two main types: HTMLCollection and NodeList.
This article compares their concepts, similarities, and differences to help you understand how to use them effectively.
Why Are There Two Types of DOM Collections?
When working directly with DOM objects in JavaScript, these objects are typically retrieved using specific functions. Some of these functions return multiple elements because the selected HTML elements in the document may exist in multiples rather than just one.
For example, when using the getElementsByTagName() method to select <div> elements, there might be just one <div> in the document or many. In such cases, JavaScript returns a collection object that groups all the matched elements together. This type of object is generally called a DOM collection.
In JavaScript, DOM collections are divided into two types: HTMLCollection and NodeList.
Why are there two different types of DOM collections? This distinction should be understood in the context of the historical development of JavaScript and the evolution of the web.
The Origin of HTMLCollection – The Early Collection
Before the modern web, JavaScript's use cases and capabilities were quite limited and constrained. The DOM structure was simpler, and only a few methods were available to handle HTML elements.
HTMLCollection originated from this early stage of JavaScript.
The Origin of NodeList – The Modern Collection
As the web evolved and JavaScript’s usage and functionality expanded, HTMLCollection became insufficient. A more versatile DOM collection was needed to handle a wider variety of nodes, which led to the creation of NodeList.
As mentioned earlier, the two types of DOM collections, HTMLCollection and NodeList, emerged from the web's historical and technological development.
HTMLCollection, which has existed since the early days, focuses on managing simple lists of elements in real-time but is limited in functionality. In contrast, NodeList was designed to handle more complex and diverse node structures. Based on extended features and modern standards, NodeList is widely used throughout web development today.
| Category | HTMLCollection |
NodeList |
|---|---|---|
| Scope | Handles only element nodes in the DOM | Handles not only element nodes but also text, comments, attributes, and other node types |
| Selection Criteria | Limited to tag names, class names, etc. | Flexible selection based on CSS selectors |
| Common Methods | getElementsByTagName(),
getElementsByClassName() |
querySelectorAll() |
As shown in the table above, HTMLCollection is used to retrieve elements based on simple criteria such as tag or class names, making its use more limited. In contrast, NodeList supports flexible selection using CSS selectors, which makes it more useful and commonly used in modern web development.
Comparison of HTMLCollection and NodeList Objects
Now, let's take a closer technical look at HTMLCollection and NodeList by comparing them in the table below.
| Feature | HTMLCollection |
NodeList |
|---|---|---|
| Purpose | To handle element nodes in the DOM | To handle not only element nodes but also text, comments, attributes, and other node types |
| Creation | getElementsByTagName()
getElementsByClassName(),
and other methods' return values |
querySelectorAll(),
and the return value of Node.childNodes |
| Reflects DOM changes in real-time (live) |
Yes |
|
| Array-like object | Yes | Yes |
| Convertible to array using spread syntax or Array.from() |
Yes | Yes |
Iterable with for...of loop |
Yes | Yes |
Iterable with for loop |
Yes | Yes |
Iterable with forEach() method |
No | Yes |
Supports length property |
Yes | Yes |
| Advantages | Reflects DOM changes
in real-time (live) (Note: Be careful when using the for loop) |
|
| Disadvantages | Can only create objects by class name or tag name, limiting element selection (major drawback) | Does not reflect DOM changes in real-time when using querySelectorAll(); Node.childNodes reflects changes but is cumbersome to work with |
Using HTMLCollection and NodeList: Methods and Examples
Click the links below to learn more about how to use HTMLCollection and NodeList with detailed methods and examples.
Browser compatibility
| Object |
Desktop Chrome
|
DesktopDesktop Edge
|
Desktop Firefox
|
Safari
|
|---|---|---|---|---|
HTMLCollection
|
1 | 12 | 1 | 1 |
NodeList
|
1 | 12 | 1 | 1 |
Specifications
| Specification | |
|---|---|
HTMLCollection
|
DOM Standard #interface-htmlcollection |
NodeList
|
HTMLCollection #interface-nodelist |