Why forEach array method is not a function on looping over document.getElementsByClassName

Question

In order to get the matched elements & loop over it , I am using querySelectorAll & forEach array method. According to this,querySelectorAll will return a nodelist.

I can also use getElementsByClassName by get the matched elements but cannot directly use forEach. But this link tell us that it also return an nodelist object

on using forEach on return of getElementsByClassName it throws an error ,forEach is not a function

Can you please let me know why forEach does not directly work on return of getElementsByClassName, when return of both getElementsByClassName & querySelectorAll is nodelist

@krzyk this is more a conceptual question .Still you can refer this https://jsfiddle.net/vasi_32/ocju73p7/1/ You need to replace with querySelectorAll with getElementsByClass to see the error — brk, Jun 20 '16 at 05:01
Don't rely on W3Schools to completely correct information. `getElementsByClassName` returns a [`HTMLCollection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection). — Spencer Wieczorek, Jun 20 '16 at 05:07
@SpencerWieczorek: Ah, right, it's one of the new DOM4 methods. — Bergi, Jun 20 '16 at 05:12

Mulan · Answer 1 · 2016-06-20T05:12:58.257

document.querySelectorAll returns a NodeList not an Array. Never fear, tho!

You can use Function.prototype.call to change the context of the Array.prototype.forEach function.

var nodes = document.querySelectorAll('span');
var colors = ['red', 'orange', 'gold', 'lawngreen', 'dodgerblue', 'deepskyblue', 'blueviolet'];

Array.prototype.forEach.call(nodes, function(elem, idx) {
  // do something
  elem.style.color = colors[idx];
});

<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
<span>G</span>

EDIT

Actually my doubt is why forEach does not directly work on return of document.getElementsByClassName

That's because document.getElementsByClassName reutrns an HTMLCollection not an Array. HTMLCollection does not have a forEach method on its prototype.

var nodes = document.getElementsByTagName('span');
console.log(nodes.constructor.name);
//=> HTMLCollection

<span>A</span>

Actually my doubt is why forEach does not directly work on return of document.getElementsByClassName — brk, Jun 20 '16 at 05:04

score 2 · Answer 2 · edited May 23 '17 at 11:58

From what I tested:

<ul>
    <li class="test"></li>
    <li class="test"></li>
    <li class="test"></li>
    <li class="test"></li>
    <li class="test"></li>
    <li class="test"></li>
    <li class="test"></li>
</ul>
<script type="text/javascript">
    var elementList = document.querySelectorAll("li");
    console.log(elementList.constructor);
    var elementList2 = document.getElementsByClassName("test");
    console.log(elementList2);
    console.log(elementList2.constructor);
</script>

querySelectorAll returns:

NodeList() { [native code] }

while getElementsByClassName returns:

HTMLCollection() { [native code] }

Pretty much, as the previous answer mentioned, the HTML collection doesn't have access to the forEach method.

EDIT1: Difference between HTMLCollection, NodeLists, and arrays of objects seems to answer some of the differences!

EDIT2: It seems like you can iterate through an HTML Collection with the technique using ES6 mentioned here: For loop for HTMLCollection elements

score 0 · Answer 3 · answered Sep 14 '20 at 07:29

We can interact with an HTML Collection as if it’s an array in many other ways. We can use index numbers to access data. It looks like an array. But it functions a bit differently. First of all, a bit of a distinction. I’ve heard nodeList and HTMLCollection used somewhat interchangeably. They’re both DOM lists, but the only real difference is that HTMLCollection is more specific. It contains DOM elements that are the same, whereas a nodeList can contain a variety of DOM elements. That’s why querySelectorAll returns a nodeList but getElementsByTagName returns an HTMLCollection. Interestingly enough, forEach works on a nodeList but not an HTMLCollection.

Now there are a number of ways to iterate over a HTMLCollection;

var p = document.getElementsByTagName("p") for(var i = 0; i < p.length; i++) { console.log(p)} Check other ways here https://medium.com/@larry.sassainsworth/iterating-over-an-html-collection-in-javascript-5071f58fad6b

Why forEach array method is not a function on looping over document.getElementsByClassName

3 Answers3

Linked