Introduction to HTMLCollection in JavaScript

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.

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

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

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

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

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

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

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

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

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

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

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

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

See recent articles by JS Nooby

FEATURED

How to Insert an element before another DOM element with JavaScript

Insert an element before another DOM element with JavaScript

FEATURED

How to trigger built-in and custom events using JavaScript

Triggering built-in and custom events using JavaScript

FEATURED

How to remove an event handler in JavaScript

How to remove an event handler in JavaScript

FEATURED

Introduction to Service Workers in JavaScript

Introduction to Service Workers in JavaScript

FEATURED

How to use object & array destructuring in JavaScript

How to use object & array destructuring in JavaScript

FEATURED

How to check if an object is an array in JavaScript

How to check if an object is an array in JavaScript