How to Loop Through an HTMLCollection
Tags: javascript, html
Published: 2020-05-14 18:44:44

If you've ever written a frontend application in JavaScript, you've probably run into HTMLCollections.

I recently deployed [Plant Flashcards](https://github.com/isabelxklee/plant-flashcards), a full-stack application where you can learn about plant facts and test your knowledge. I used a vanilla JavaScript for the frontend and a homegrown Rails API for the backend! Interacting with JSON objects and trying to manipulate elements on the DOM made me realize that HTMLCollections were very different from plain ole, regular Arrays.

HTMLCollections are array-like objects that return HTML elements on the DOM. Unlike regular Arrays, they’re “live” objects, so they’ll change automatically depending on the contents of the DOM.

## Let's dive in
Here's an example of a variable that will return an HTMLCollection. In this line of code, we're pulling all the elements from the document object  that have the class name `plant`. We're then assigning it to a variable called `plantsArray`.
```javascript
let plantsArray = document.getElementsByClassName("plant")
```

And here's what `plantsArray` might look like when logged to the console:

![Example of an HTMLCollection](https://i.imgur.com/uUIbtzn.png)

## The difference between HTMLCollections and Arrays
Out of all the CRUD (Create, Read, Update, Delete) operations, HTMLCollections are mainly used for reading elements. They’re not meant for DOM manipulation because they're live objects. Arrays, on the other hand, can be easily mutated.

HTMLCollections also have different built-in properties and methods than Arrays.

See what happens when we try to access the individual elements in an HTMLCollection like we would with an Array.

```javascript
plantsArray.forEach((plant) => {
   console.log(plant)
})

=> TypeError: plantsArray.forEach is not a function
```

Trying to run a `.forEach()` method on `plantsArray` gives us a TypeError. HTMLCollections may look like Arrays and are also technically a list of objects, but they are fundamentally different.

## How to loop through an HTMLCollection
1) If we want to be able to use the `.forEach()` method, we can turn the HTMLCollection into an Array, then call the method on it.

```javascript
Array.from(plantsArray).forEach((plant) => {
   console.log(plant.name)
})

=> "Monstera", "ZZ Plant", "Snake Plant"
```

2) Run a `for/of loop`.

```javascript
for (plant of plantsArray) {
   console.log(plant.name)
}
    
=> "Monstera", "ZZ Plant", "Snake Plant"
```

3) Run a `for loop`.
```javascript
for (i = 0; i < plantsArray.length; i++) {
   console.log(plantsArray[i].name)
}
    
=> "Monstera", "ZZ Plant", "Snake Plant"
```

## Conclusion
Get comfortable interacting with HTMLCollections and their unique properties and methods!

#### Sources
[Geeks for Geeks](https://www.geeksforgeeks.org/htmlcollection-for-loop)
[Stack Overflow discussion](https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements)
[Pawel Grzybek's blog](https://pawelgrzybek.com/loop-through-a-collection-of-dom-elements)
[Hacker Noon](https://hackernoon.com/htmlcollection-nodelist-and-array-of-objects-da42737181f9)