javascript - es6 - El uso de forEach en una matriz de getElementsByClassName da como resultado "TypeError: undefined no es una función"
javascript foreach key value (3)
Eso es porque document.getElementsByClassName devuelve una HTMLCollection , no una matriz.
Afortunadamente es un objeto "similar a una matriz" (que explica por qué se registra como si fuera un objeto y por qué puede iterar con un bucle for estándar), por lo que puede hacer esto:
[].forEach.call(document.getElementsByClassName(''myClass''), function(v,i,a) {
Con ES6 (en los navegadores modernos o con Babel), también puede usar Array.from construye matrices de objetos tipo array:
Array.from(document.getElementsByClassName(''myClass'')).forEach(v=>{
o disemine el objeto parecido a una matriz a una matriz:
[...document.getElementsByClassName(''myClass''))].forEach(v=>{
En mi JSFiddle , simplemente estoy tratando de iterar sobre una matriz de elementos. La matriz no está vacía, como lo prueban los enunciados de registro. Sin embargo, la llamada a forEach me da el forEach (no tan útil) "Unkeught TypeError : undefined no es una función".
Debo estar haciendo algo estúpido; ¿Qué estoy haciendo mal?
Mi código:
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>
Intenta esto, debería funcionar:
<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>
en caso de que desee acceder al ID de cada elemento de una clase específica, puede hacer lo siguiente:
Array.from(document.getElementsByClassName(''myClass'')).forEach(function(element) {
console.log(element.id);
});