Ich habe an einem kurzen Skript gearbeitet, um <abbr>den inneren Text der Elemente zu ändern , aber festgestellt, dass nodelistes keine forEachMethode gibt. Ich weiß, dass nodelistdas nicht erbt Array, aber scheint es forEachnicht eine nützliche Methode zu sein? Gibt es eine bestimmte Implementierung Frage , die ich bin mir nicht bewusst , dass verhindert Zugabe forEachzu nodelist?

Hinweis: Mir ist bekannt, dass Dojo und jQuery beide eine forEachForm für ihre Knotenlisten haben. Ich kann es aufgrund von Einschränkungen auch nicht verwenden.

NodeList hat jetzt forEach () in allen gängigen Browsern

Siehe nodeList forEach () auf MDN .

Ursprüngliche Antwort

Keine dieser Antworten erklärt, warum NodeList nicht von Array erbt, sodass es forEachund alles andere möglich ist .

Die Antwort finden Sie in diesem Diskussions-Thread . Kurz gesagt, es bricht das Web:

Das Problem war Code, der fälschlicherweise angenommen hat, dass die Instanz ein Array in Kombination mit Array.prototype.concat ist.

Es gab einen Fehler in der Google Closure Library, der dazu führte, dass fast alle Google-Apps aufgrund dessen fehlschlugen. Die Bibliothek wurde aktualisiert, sobald dies gefunden wurde, aber es gibt möglicherweise noch Code, der dieselbe falsche Annahme in Kombination mit concat macht.

Das heißt, irgendein Code hat so etwas getan

if (x instanceof Array) {
  otherArray.concat(x);
} else {
  doSomethingElseWith(x);
}

Allerdings concatwird behandeln „echte“ Arrays (nicht Instanceof Array) unterschiedlich von anderen Objekten:

[1, 2, 3].concat([4, 5, 6]) // [1, 2, 3, 4, 5, 6]
[1, 2, 3].concat(4) // [1, 2, 3, 4]

Das bedeutet, dass der obige Code als xNodeList fehlerhaft war, weil er zuvor den doSomethingElseWith(x)Pfad entlang ging , während er danach den otherArray.concat(x)Pfad entlang ging , was etwas Seltsames tat, da xes sich nicht um ein echtes Array handelte.

Für einige Zeit gab es einen Vorschlag für eine ElementsKlasse, die eine echte Unterklasse von Array war und als "neue NodeList" verwendet werden sollte. Dies wurde jedoch zumindest vorerst aus dem DOM-Standard entfernt , da eine Implementierung aus verschiedenen technischen und spezifikationsbezogenen Gründen noch nicht möglich war.

Du kannst tun

Array.prototype.forEach.call (nodeList, function (node) {

    // Your code here.

} );

Sie können ein neues Array von Knoten erstellen.

  var nodeList = document.getElementsByTagName('div'),

      nodes = Array.prototype.slice.call(nodeList,0); 

  // nodes is an array now.
  nodes.forEach(function(node){ 

       // do your stuff here.  

  });

Hinweis: Dies ist nur eine Liste / ein Array von Knotenreferenzen, die wir hier erstellen, keine doppelten Knoten.

  nodes[0] === nodeList[0] // will be true

Sag niemals nie, es ist 2016 und das NodeListObjekt hat eine forEachMethode in neuestem Chrome (v52.0.2743.116) implementiert.

Es ist zu früh, um es in der Produktion zu verwenden, da andere Browser dies noch nicht unterstützen (getestet FF 49), aber ich würde vermuten, dass dies bald standardisiert wird.

Kurz gesagt, es ist ein Designkonflikt, diese Methode zu implementieren.

Von MDN:

Warum kann ich forEach oder map nicht in einer NodeList verwenden?

NodeList werden sehr ähnlich wie Arrays verwendet, und es wäre verlockend, Array.prototype-Methoden für sie zu verwenden. Dies ist jedoch unmöglich.

JavaScript verfügt über einen Vererbungsmechanismus, der auf Prototypen basiert. Array-Instanzen erben Array-Methoden (z. B. forEach oder map), da ihre Prototypkette wie folgt aussieht:

myArray --> Array.prototype --> Object.prototype --> null (Die Prototypkette eines Objekts kann durch mehrmaliges Aufrufen von Object.getPrototypeOf abgerufen werden.)

forEach, map und dergleichen sind eigene Eigenschaften des Array.prototype-Objekts.

Im Gegensatz zu Arrays sieht die NodeList-Prototypkette wie folgt aus:

myNodeList --> NodeList.prototype --> Object.prototype --> null

NodeList.prototype enthält die item-Methode, jedoch keine der Array.prototype-Methoden, sodass sie nicht für NodeLists verwendet werden können.

Quelle: https://developer.mozilla.org/en-US/docs/DOM/NodeList (scrollen Sie nach unten zu Warum kann ich forEach oder Map nicht auf einer NodeList verwenden? )

Wenn Sie forEach in NodeList verwenden möchten, kopieren Sie diese Funktion einfach aus dem Array:

NodeList.prototype.forEach = Array.prototype.forEach;

Das ist alles, jetzt können Sie es auf die gleiche Weise verwenden, wie Sie es für Array tun würden:

document.querySelectorAll('td').forEach(function(o){
   o.innerHTML = 'text';
});

In ES2015 können Sie jetzt die forEachMethode für die Knotenliste verwenden.

document.querySelectorAll('abbr').forEach( el => console.log(el));

Siehe Der MDN-Link

Wenn Sie jedoch HTML-Sammlungen oder andere Array-ähnliche Objekte verwenden möchten, können Sie in es2015 die Array.from()Methode verwenden. Diese Methode verwendet ein Array-ähnliches oder iterierbares Objekt (einschließlich NodeList, HTML-Sammlungen, Zeichenfolgen usw.) und gibt eine neue Array-Instanz zurück. Sie können es so verwenden:

const elements = document.getElementsByTagName('abbr');
Array.from(elements).forEach( el => console.log(el));

Da die Array.from()Methode shimmbar ist, können Sie sie in es5-Code wie diesem verwenden

var elements = document.getElementsByTagName('abbr');
Array.from(elements).forEach( function(el) {
    console.log(el);
});

Weitere Informationen finden Sie auf der MDN- Seite.

Um zu überprüfen , Unterstützung aktuelle Browser .

ODER

Eine andere Möglichkeit für es2015 ist die Verwendung des Spread-Operators.

[...document.querySelectorAll('abbr')].forEach( el => console.log(el));

MDN-Spread-Operator

Spread Operator - Browser-Unterstützung

Meine Lösung:

//foreach for nodeList
NodeList.prototype.forEach = Array.prototype.forEach;
//foreach for HTML collection(getElementsByClassName etc.)
HTMLCollection.prototype.forEach = Array.prototype.forEach;

NodeList ist Teil der DOM-API. Schauen Sie sich die ECMAScript-Bindungen an, die auch für JavaScript gelten. http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html . Die Funktion nodeList und eine schreibgeschützte Längeneigenschaft sowie die Funktion item (index) geben einen Knoten zurück.

Die Antwort ist, Sie müssen iterieren. Es gibt keine Alternative. Foreach wird nicht funktionieren. Ich arbeite mit Java DOM API-Bindungen und habe das gleiche Problem.

Überprüfen Sie MDN auf NodeList.forEach- Spezifikation.

NodeList.forEach(function(item, index, nodeList) {
    // code block here
});

Verwenden Sie im IE die Antwort von akuhn :

[].forEach.call(NodeList, function(item, index, array) {
    // code block here
});