Why forEach method doesn't work on HTMLCollection

Question

I was learning about DOM manipulation and have an HTML document.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1 class="test"> Title </h1> <h2 class="test"> Here is the list of all the programming languages: </h2> <ul> <li>JavaScript</li> <li>Python</li> <li>Go</li> </ul> <script> const test = document.getElementsByClassName('test'); test.forEach(item => { console.log(item); }); </script> </body> </html>

I have tried accessing the html elements using forEach method but it gives error saying that test.forEach is not a function.

Does this answer your question? Most efficient way to convert an HTMLCollection to an Array — Julia
– Julia, Commented Jan 12, 2023 at 9:51
FYI: refer to documentation for HTMLCollection to see what methods are/are not available — Jaromanda X
– Jaromanda X, Commented Jan 12, 2023 at 9:54
Alternative duplicate: Iterating over result of getElementsByClassName using Array.forEach — Ivar
– Ivar, Commented Jan 12, 2023 at 9:57
This is kinda weird question, like "why a stone can't walk" ... Voted to close as "this one was resolved in a way less likely to help future readers". — Teemu
– Teemu, Commented Jan 12, 2023 at 10:07

AKX · Accepted Answer · 2023-01-12 09:50:32Z

Because HTMLCollections aren't Arrays. (For one, as the docs say, a HTMLCollection is live and can change when the document changes; an array can't.)

You can use Array.from(test) or [...test] spreading to make an Array of something that has a .length and supports item access (which HTMLCollection does).

IOW,

<script> const test = document.getElementsByClassName('test'); [...test].forEach(item => { console.log(item); }); </script>

CodeGuru · Accepted Answer · 2023-01-12 10:06:03Z

HTMLCollection is not an Array but an object. So you can use for loop or you can convert it into an array by doing [...test].

cheeeseburger · Accepted Answer · 2023-01-12 10:11:51Z

Rather than using getElementsByClassName, try querySelectorAll

const test = document.querySelectorAll('.test'); test.forEach(item => { console.log(item); });

Simple and work like a charm.

A NodeList (as returned by querySelectorAll) isn't an Array either, though. It does have forEach, but not e.g. .map.

Collectives™ on Stack Overflow

Why forEach method doesn't work on HTMLCollection

3 Answers 3

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Linked

Related