> For the complete documentation index, see [llms.txt](https://ploegert.gitbook.io/til/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ploegert.gitbook.io/til/programmy/javascript/turn-an-html-collection-into-an-array.md).

# Turn An HTMLCollection Into An Array

If you are using any of the built-in document query utilities, such as [`getElementsByClassName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName):

```javascript
> document.getElementsByClassName("some-class")
HTMLCollection(5) [ ... ]
```

Then you are going to get an [`HTMLCollection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) in response. An instance of this cannot be iterated over, so you cannot call things like `map` and `filter` against it.

To use Array collection methods, you are first going to need to turn the `HTMLCollection` into an array. You can do this with [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from):

```javascript
> Array.from(document.getElementsByClassName("some-class"))
[ ... ]
```

[source](https://medium.com/@chuckdries/traversing-the-dom-with-filter-map-and-arrow-functions-1417d326d2bc)