Menu
In my JSFiddle, I’m simply trying to iterate over an array of elements. The array is non-empty, as the log statements prove. Yet the call to forEach gives me the (not so helpful) “Uncaught TypeError: undefined is not a function” error.
I must be doing something stupid; what am I doing wrong?
My code:
var arr = document.getElementsByClassName('myClass'); console.log(arr); console.log(arr[0]); arr.forEach(function(v, i, a) { console.log(v); });.myClass { background-color: #FF0000; }<div class="myClass">Hello</div>
619
The getElementsByClassName() method returns an array-like of objects of the child elements with a specified class name. The getElementsByClassName() method is available on the document element or any other elements. The method returns the elements which is a live HTMLCollection of the matches elements.
The getElementsByClassName() method returns a collection of child elements with a given class name. The getElementsByClassName() method returns a NodeList object.
forEach() is an array function from Node. js that is used to iterate over items in a given array. Parameter: This function takes a function (which is to be executed) as a parameter. Return type: The function returns array element after iteration.
getElementsByClassName("a") will reliably list them in order: d1, d2, d3, d4, d5.
That's because document.getElementsByClassName returns a HTMLCollection, not an array.
Fortunately it's an "array-like" object (which explains why it's logged as if it was an object and why you can iterate with a standard for loop), so you can do this :
[].forEach.call(document.getElementsByClassName('myClass'), function(v,i,a) { With ES6 (on modern browsers or with Babel), you may also use Array.from which builds arrays from array-like objects:
Array.from(document.getElementsByClassName('myClass')).forEach(v=>{ or spread the array-like object into an array:
[...document.getElementsByClassName('myClass'))].forEach(v=>{ Try this it should work :
<html> <head> <style type="text/css"> </style> </head> <body> <div class="myClass">Hello</div> <div class="myClass">Hello</div> <script type="text/javascript"> var arr = document.getElementsByClassName('myClass'); console.log(arr); console.log(arr[0]); arr = [].slice.call(arr); //I have converted the HTML Collection an array arr.forEach(function(v,i,a) { console.log(v); }); </script> <style type="text/css"> .myClass { background-color: #FF0000; } </style> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
