HTML Collections in JavaScript

When working with the DOM (Document Object Model) in JavaScript, you often need to access and manipulate multiple elements at once. One of the ways JavaScript provides access to groups of elements is through HTMLCollections.

In this tutorial, we will explore what an HTMLCollection is, how it works, and how it differs from other similar objects like NodeList.

What is an HTMLCollection?

An HTMLCollection is an array-like object in JavaScript that represents a collection of HTML elements from the DOM. It is commonly returned by methods such as getElementsByTagName() and getElementsByClassName(). One important characteristic of an HTMLCollection is that it is live, meaning the collection updates automatically whenever elements are added to or removed from the document.

This live behavior makes HTMLCollections extremely useful when working with dynamic web pages where elements frequently change. However, since the collection updates in real time, developers need to be careful while looping through elements, as modifying the DOM during iteration can sometimes lead to unexpected behavior.

Unlike normal JavaScript arrays, an HTMLCollection does not support all array methods directly. Even though it looks similar to an array and allows indexed access, it is technically a specialized DOM collection object designed specifically for handling HTML elements.

How to Access an HTMLCollection

There are several ways to obtain an HTMLCollection in JavaScript, depending on the type of elements you need to select. These methods return a live collection, meaning any changes to the DOM automatically reflect in the collection.

1. Using document.getElementsByTagName()

One of the most common ways to retrieve an HTMLCollection is by using the getElementsByTagName() method. This method selects all elements matching a specific HTML tag name.

let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs); // Outputs an HTMLCollection of all <p> elements

We retrieve all <p> elements present in the document. The returned value is an HTMLCollection containing every paragraph element.

If new paragraph elements are added dynamically later using JavaScript, they automatically appear inside the collection without needing to call the method again. This demonstrates the live nature of HTMLCollections.

2. Using document.getElementsByClassName()

Another commonly used method is getElementsByClassName(), which retrieves all elements containing a specific class name.

let items = document.getElementsByClassName("item");
console.log(items); // Outputs an HTMLCollection of elements with class 'item'

Here, we select all elements with the class item. The method returns an HTMLCollection containing matching elements from the DOM.

This approach is especially useful when multiple elements share the same styling or functionality through CSS classes. Since the collection remains live, adding or removing the item class dynamically also updates the collection automatically.

3. Using Built-In Document Collections

JavaScript also provides several built-in document properties that directly return HTMLCollections. These properties are useful for quickly accessing commonly used elements without writing custom selectors.

Some of the most frequently used built-in collections include:

• document.forms → Returns all <form> elements

• document.images → Returns all <img> elements

• document.links → Returns all <a> elements containing an href attribute

The following example demonstrates these collections:

console.log(document.forms); 
console.log(document.images); 
console.log(document.links);

The browser outputs live HTMLCollections for forms, images, and links currently present in the document.

These built-in collections are particularly useful in larger applications where quick access to forms, media elements, or navigation links is required for validation, event handling, or dynamic content updates.

HTMLCollection vs NodeList

A NodeList is a collection of nodes, which can be elements, text nodes, or other DOM nodes. It is returned by various DOM methods such as document.querySelectorAll() and childNodes. Although HTMLCollection and NodeList may seem similar, they have key differences:

Feature	HTMLCollection	NodeList
Live Collection	Yes, updates dynamically	Static unless returned by childNodes
Index Access	Yes	Yes
forEach Method	No	Yes (for static NodeList)
Access Methods	getElementsByTagName, getElementsByClassName	querySelectorAll, childNodes

Looping Through an HTMLCollection

Since an HTMLCollection is only array-like and not an actual JavaScript array, it does not directly support array methods such as forEach(), map(), or filter(). Because of this, we need to use alternative looping techniques to iterate through the elements stored inside the collection.

There are multiple ways to loop through an HTMLCollection depending on the situation and coding style preference. Some methods are more traditional, while others provide cleaner and more modern syntax.

1. Using a Traditional for Loop

The most common and reliable way to iterate through an HTMLCollection is by using a traditional for loop. Since HTMLCollections provide indexed access and a length property, they work very well with standard looping syntax.

let elements = document.getElementsByClassName("item"); 
for (let i = 0; i < elements.length; i++) {     
	console.log(elements[i].innerText); 
}

We first retrieve all elements containing the class item. The loop then starts from index 0 and continues until all elements inside the collection have been accessed.

Inside the loop, elements[i] refers to the current element, while innerText retrieves the visible text content of that element.

This approach is widely used because it offers precise control over iteration and works consistently across all browsers.

2. Using the for...of Loop:

A cleaner and more modern way to iterate through an HTMLCollection is by using the for...of loop.

let items = document.getElementsByClassName("item"); 
for (let item of items) {     
	console.log(item.innerText); 
}

Here, the loop automatically iterates through each element in the collection without needing to manage indexes manually.

During every iteration:

• item represents the current HTML element

• innerText retrieves the text content of that element

This method improves readability and reduces the amount of boilerplate code compared to a traditional for loop. It is especially useful when we only need direct access to elements and do not require the index position.

3. Converting to an Array and Using forEach:

Since HTMLCollections do not support methods like forEach() directly, another common approach is converting the collection into a true JavaScript array.

This can be done using Array.from():

let elementsArray = Array.from(document.getElementsByClassName("item")); elementsArray.forEach(element => console.log(element.innerText));

Array.from() converts the live HTMLCollection into a standard JavaScript array. Once converted, we can use all modern array methods including:

1. forEach()

2. map()

3. filter()

4. reduce()

The forEach() method then iterates through every element and prints its text content to the console.

This approach is extremely useful when performing advanced array operations or functional programming techniques on DOM elements. However, unlike the original HTMLCollection, the converted array becomes static and does not automatically update when the DOM changes.

HTMLCollection is Live

One of the most important characteristics of an HTMLCollection is that it is live. This means the collection automatically updates itself whenever changes occur in the DOM. If elements are added, removed, or modified dynamically, the HTMLCollection instantly reflects those changes without needing to run the selector again.

An HTMLCollection usually represents groups of DOM elements such as all <div>, <p>, or <a> tags present inside a webpage. Because the collection stays connected to the live document structure, it always contains the latest matching elements currently available in the DOM.

This behavior makes HTMLCollections very useful for dynamic web applications where elements are frequently created or removed using JavaScript. However, it also means developers need to be careful while looping through collections, especially when modifying the DOM during iteration, since the collection size can change in real time.

This behavior is very different from a normal JavaScript array. Arrays are static by default, meaning they do not automatically update when the DOM changes. If new elements are added to the page, an existing array remains unchanged unless we manually update it.

The following example demonstrates the live behavior of an HTMLCollection:

let divs = document.getElementsByTagName("div");
console.log(divs.length); // Assume 3 divs exist

document.body.appendChild(document.createElement("div"));
console.log(divs.length); // Now, length is 4 because HTMLCollection updates dynamically

As soon as the new element is added, the HTMLCollection updates automatically. When we check divs.length again, the value changes from 3 to 4 without re-running the selector.

This clearly demonstrates why HTMLCollections are called live collections.

While this automatic synchronization is powerful, it can sometimes affect performance in highly dynamic applications because the browser continuously keeps the collection updated as the DOM changes.

Conclusion

HTMLCollection provides an efficient way to access and work with multiple DOM elements in JavaScript. It is widely used in DOM manipulation and plays an important role in dynamic web development. Although it behaves similarly to an array, it is important to remember that an HTMLCollection is not a true JavaScript array. Because of this, certain array methods such as forEach() are unavailable directly unless the collection is first converted into an array.

Another major feature of HTMLCollections is their live nature. Since the collection updates automatically whenever matching elements change in the DOM, it becomes extremely useful for handling real-time document updates and interactive web interfaces.

Understanding how HTMLCollections work helps developers write cleaner, more efficient, and more predictable DOM manipulation code in JavaScript applications.