Mit forEach über ein array von getElementsByClassName Ergebnisse in "TypeError: undefined ist keine Funktion"

In mein JSFiddle, ich bin einfach zu versuchen, Sie zu iterieren über ein array von Elementen. Das array ist nicht leer, da die log-Anweisungen beweisen. Doch der Aufruf forEach gibt mir die (nicht so hilfreich) "nicht Erfasste TypeError: undefined ist nicht eine Funktion" Fehler.

Ich muss etwas dumm, was mache ich falsch?

Mein code:

JS:

var arr = document.getElementsByClassName('myClass');
console.log(arr);
console.log(arr[0]);
arr.forEach(function(v, i, a) {
  console.log(v);
});

CSS:

.myClass {
  background-color: #FF0000;
}

HTML:

<div class="myClass">Hello</div>

arr ist kein array, sondern ein HTMLCollection. Das es nicht die gleichen Methoden wie ein array. developer.mozilla.org/en-US/docs/Web/API/... . Hier ist SO ein post darüber auch: stackoverflow.com/questions/13433799/...
So etwas wie [1,2,3].forEach(function(v,i,a) { console.log(v); }); ist in Ordnung. Was ist der Unterschied zwischen dieser und der array in meinem Beispiel?
Sie nicht eine array in deinem Beispiel. Was macht Sie denken, es ist ein array?
die Tatsache, dass ich verwendet getElementsByClassName anderswo und iteriert über die es mit einer normalen for-Schleife. Sie lernen jeden Tag etwas neues!
Ahh, dass ist es, was ich erwartete, Sie zu sagen. Also das ist ja, als dystroy zeigte in seiner Antwort, es gibt array-ähnliche Objekte, können "act" auf die gleiche Weise - mit Indizes für properties...was getElementsByClassName gibt
Als arr instanceof Array führt false es nicht wahrnehmen kann jeder Prototyp Methoden der Array Objekt wie - Array.der Prototyp.forEach(). arr ist ein HTMLCollection und ein array-Objekt wie (aber nicht Erben oder instanziieren Array). Damit Ihre standard - for Schleife funktioniert so, dass einfach durchläuft den index des Objekts und ist nicht ein Prototyp Array.
sollte sich die Unterschiede zwischen integrierten und host-Objekte. Erstere entsprechen ECMA-262, die später nur so viel, wie der Gastgeber wünscht. Der DOM hat viele Objekte, die es ermöglichen, Zugang zu den Mitgliedern, die durch den index (- Dokument.Bilder, Dokument.Formen, bilden.Elemente, wählen Sie.Optionen, etc.), meist basierend auf der NodeList-Schnittstelle.

InformationsquelleAutor Jer | 2014-06-17

foreach javascript

159

Weil document.getElementsByClassName gibt eine HTMLCollection, und nicht ein array.

Glücklicherweise ist es ein "array-artiges" Objekt (was erklärt, warum es protokolliert, als ob es ein Objekt und warum kann man die Iteration mit einem standard - for Schleife), so können Sie dies tun :
```
[].forEach.call(document.getElementsByClassName('myClass'), function(v,i,a) {
```
Mit ES6 (auf modernen Browsern oder mit Babel), können Sie auch Array.aus die baut arrays aus array-ähnliche Objekte:
```
Array.from(document.getElementsByClassName('myClass')).forEach(v=>{
```
oder Verbreitung der array-artiges Objekt in ein array:
```
[...document.getElementsByClassName('myClass'))].forEach(v=>{
```
- Ich bin froh, dass ich gepostet, hätte ich das nie angesehen! Gibt es noch andere JavaScript-Datenstrukturen zugegriffen werden kann, wie foo[0] aber nicht arrays?
- ist eine. jQuery-Objekte sind das andere. Sie könnten selbst einer: var a = {"0": "str1", "1": "str2", length: 2}
- Hier gehen wir mit alten Browsern wieder... vorbei an einem host-Objekt an eine native-Methode wird nicht in IE 8 und niedriger. Vielleicht interessiert es niemanden, aber einige vielleicht. 😉 Oh, es nicht unterstützt, ist getElementsByClassName, aber querySelectorAll('.myClass') funktionieren sollte. Ich warte immer noch auf Iteratoren werden Hinzugefügt, um die NodeList-API. 🙁
- Normalerweise müssen Sie auch die splice Funktion.
- Als Randbemerkung, wenn Sie beabsichtigen, zu brechen aus der Schleife aus irgendeinem Grund Array.prototype.forEach lassen Sie nicht tun. Wenn Sie diese Anforderung später verwenden standard - for Schleife oder, wenn Sie möchten, verwenden Sie das array-Objekt verwenden Array.prototype.every oder Array.prototype.some (beachten Sie aber, dass jeder/einige sind nicht unterstützt in IE8 oder weniger)
- Du meinst slice?
- Nein. splice, die der Funktion, die Sie zum ändern der array.
- Richtig, aber ich denke, ich Frage mich, was Sie damit meinte "Sie müssen auch die splice-Funktion" - für was? Als Beispiel, ich würde in der Regel verwenden slice zu "kopieren" arguments in ein array, aber ich hatte noch nie eine Notwendigkeit für splice
- Sie müssen splice für das Objekt "array-like". Vergleichen Sie die logs hier : jsbin.com/sigut/1/edit
- Ooooooh! Ich hatte keine Ahnung, was Sie meinte, bis Sie gepostet, dass. Ich sehe jetzt 🙂 ich habe immer "array-like" zu müssen nur Indizes und eine length Eigenschaft. Aber ich habe auch gerade gelesen, Ihr "array-like" - Artikel, den Sie in Ihrer Antwort, und es erwähnt die Einbeziehung wichtiger Array.prototype, so würde ich mehr als splice, aber dennoch sehe ich deinen Punkt benötigen, um die Struktur zu ändern
- TBH die definition von "array-like" ist sehr unscharf und abhängig von der Nutzung. Manchmal habe ich nicht gehören splice in dieser definition ist aber, wenn ich will mehr sein "array-wie" nutzen zu können map, filter, und so weiter, dann schließe ich es. Einfache iteration mit forEach muss nicht splice.
- Sie sind auf jeden Fall Recht, dass es unscharf. Ich denke, mein Beispiel war für die Fähigkeit zum Zugriff auf Elemente (wie Sie gesagt haben, Sie brauchen nicht splice, vor allem mit forEach), aber auf jeden Fall das hinzufügen von Methoden wie map und filter helfen, wenn Sie Sie brauchen!
- Ich wirklich genießen eine gute Strecke Betreiber
InformationsquelleAutor Denys Séguret

Versuchen dieses sollte es funktionieren :

<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>

InformationsquelleAutor Vaibhav Jain

0

in der Veranstaltung, die Sie möchten, um Zugriff auf die ID für jedes element einer bestimmten Klasse können Sie Folgendes tun:
```
    Array.from(document.getElementsByClassName('myClass')).forEach(function(element) {
        console.log(element.id);
    });
```
InformationsquelleAutor Jason Smart

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.