An HTMLCollection is an array-like object representing 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 discuss 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 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 classic 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 statement
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 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. 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 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 an additional nameItem() method 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:

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

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.