Introduction to HTMLCollection in JavaScript

published: 28 Mar 2022

2 min read

Introduction to HTMLCollection in JavaScript

An HTMLCollection is an array-like object that represents a collection of HTML elements extracted from the document. It is always live and ordered, which means that modifications to the DOM are automatically applied to the collection elements.

In this article, we'll look at HTMLCollection in detail, what it is and how to use it in JavaScript. We will also briefly touch the difference between an HTMLCollection and a NodeList which is another object similar to HTMLCollection.

Creating an HTMLCollection

The getElementsByTagName() returns an HTMLCollection object. The following example selects all <p> elements in the document:

const elems = document.getElementsByTagName('p');

The elements in the collection can be accessed by a numeric index, name, or ID. To access the third <p> in the collection, you can write:

const p = document.getElementsByTagName('p')[2];

To access the element by name or ID, HTMLCollection provides the namedItem() method. The following example gets the <p> tag with the ID notify from the collection:

const elems = document.getElementsByTagName('p');

// select <p> with ID 'notify'
const p = elems.namedItem('notify');

Length of the HTMLCollection

Just like NodeList, the HTMLCollection also supports the length property that returns the total number of elements inside the collection:

const elems = document.getElementsByTagName('p');

// print total elements
console.log(elems.length);

The length property is extremely useful when you want to loop through the HTML elements in the collection:

const elems = document.getElementsByTagName('p');

// loop all collection elements
for (let i = 0; i < elems.length; i++) {
    elems[i].style.color = 'red';    
}

Iterating over an HTMLCollection

Apart from the simple for loop, we discussed above, the for...of statement can also be used to iterate an HTMLCollection:

const elems = document.getElementsByTagName('p');

// iterate using for...of loop
for (const p of elems) {
    console.log(p.innerText);
}

Unlike NodeList, HTMLCollection doesn't support the forEach() method. However, you can use the Array.from() method to convert HTMLCollection to a normal array, and then use forEach() to iterate over it:

const elems = document.getElementsByTagName('p');

// itereate using forEach()
Array.from(elems).forEach((p, index) => {
    console.log(p.innerText);
});

Take a look at this guide to learn more about different ways to iterate over DOM elements.

HTMLCollection vs. Arrays

An HTMLCollection object may look like an array, but it is not an array. Both are two completely different things. Just like an array, you can iterate through the collection and refers to its elements by an index number.

However, you can not use the common array methods like push(), pop(), join(), and valueOf() on an HTMLCollecton.

HTMLCollection vs. NodeList

Both HTMLCollection and NodeList are collections of DOM elements. The only difference is in the methods they provide, and in the type of nodes, they can store.

An HTMLCollection can only contain the HTML elements, whereas a NodeList can contain anything, HTML elements, comments, attributes, texts, etc.

An HTMLCollection provides the same methods as a NodeList and additionally a method called nameItem() to access the collection elements by name or ID. The NodeList elements are only accessible by a numeric index.

Both NodeList and HTMLCollection are not arrays, so you can not use the array methods like push(), pop(), join(), and valueOf() for both of them.

Summary

In this article, we learned about the HTMLCollection object, and how to use it in JavaScript. In a nutshell:

  • An HTMLCollection is an array-like collection of HTML elements.
  • An HTMLCollection is always live, which means you can modify the collection elements and the changes will be automatically applied.
  • The document.getElementsByTagName() method can be used to extract an HTMLCollection from the DOM.
  • The length property returns the total number of elements inside an HTMLCollection object.
  • You can either use the simple for loop (for old browsers) or the for...of statement to iterate over the collection elements.
  • An HTMLCollection is not an array, so common array methods can not be used on it.
  • An HTMLCollection is similar to a NodeList, but only stores HTML elements and provides an additional method to access elements by name or ID.

Introduction to HTMLCollection in JavaScript | Coding Tips And Tricks

Are we missing something?  Help us improve this article. Reach out to us.

Are you looking for other code tips?

Check out what's on in the category: javascript, programming
Check out what's on in the tag: javascript, programming, array