# Introduction to HTMLCollection in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Feb 27, 2020, updated Oct 13, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-htmlcollection

> A quick guide to understand what is HTMLCollection and how to use it in JavaScript

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](https://attacomsian.com/blog/getting-dom-elements-javascript) 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](https://attacomsian.com/blog/javascript-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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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](https://attacomsian.com/blog/javascript-loops) we discussed above, the [`for...of`](https://attacomsian.com/blog/javascript-for-of-loop) statement can also be used to iterate an `HTMLCollection`:

```javascript
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()`](https://attacomsian.com/blog/javascript-foreach) method. However, you can use the [`Array.from()`](https://attacomsian.com/blog/javascript-array-from) method to convert `HTMLCollection` to a normal array, and then use `forEach()` to iterate over it:

```javascript
const elems = document.getElementsByTagName('p')

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

Take a look at [this guide](https://attacomsian.com/blog/javascript-loop-dom-elements) 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](https://attacomsian.com/blog/javascript-arrays). 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](https://attacomsian.com/blog/javascript-arrays) 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](https://attacomsian.com/blog/javascript-loops) loop (for old browsers) or the [`for...of`](https://attacomsian.com/blog/javascript-for-of-loop) 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`](https://attacomsian.com/blog/javascript-nodelist) but only stores HTML elements and provides an additional method to access items by name or ID.