Frage Warum funktioniert forEach nicht für Kinder?


Ich habe ein <div> mit einem Kind <div> drin. Z.B.

<div id="niceParent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Ich habe versucht, sie mit den forEach Funktion, weil ich das dachte document.getElementById("niceParent").children ist ein Array, wie ich mit den Elementen zugreifen kann

console.log(document.getElementById("niceParent").children[1]);
console.log(document.getElementById("niceParent").children[2]);
console.log(document.getElementById("niceParent").children[3]);
console.log(document.getElementById("niceParent").children[4]);

Daher habe ich es versucht

document.getElementById("niceParent").children.forEach(function(entry) {
  console.log(entry);
});

was nicht funktioniert. Ich bekomme

TypeError: document.getElementById(...).children.forEach is not a function

Als Workaround habe ich es auch mit viel komplizierterem versuchtfor..in Schleife:

for (var i in document.getElementById("niceParent").children) {
  if (document.getElementById("niceParent").children[i].nodeType == 1) console.log(document.getElementById("niceParent").children[i]);
}

was wie erwartet funktioniert hat.

Warum?


15
2018-02-26 16:58


Ursprung


Antworten:


weil .children enthält ein NodeList  [MDN], kein Array. EIN NodeList Objekt ist ein Array-ähnlich Objekt, das a .length Eigenschaft und hat nur numerische Eigenschaften mögen Arrays, aber es erbt nicht von Array.prototype und ist somit kein Array.

Sie können es mithilfe von in ein Array konvertieren Array.prototype.slice:

var children = [].slice.call(document.getElementById(...).children);

ECMAScript 6 führt eine neue API zum Konvertieren von Iteratoren und array-ähnlichen Objekten in reale Arrays ein: Array.from  [MDN]. Verwenden Sie das, wenn es möglich ist, da es die Absicht viel klarer macht.

var children = Array.from(document.getElementById(...).children);

33
2018-02-26 17:00



Element.children ist nicht eine Anordnung. Es ist ein Objekt namens an HTMLCollection. Diese haben keine Methoden des Arrays (obwohl sie das haben length Eigentum).

Um es zu durchlaufen, müssen Sie es in ein Array konvertieren, das Sie verwenden können Array.prototype.slice:

var children = Array.prototype.slice.call(document.getElementById("niceParent").children);

children.forEach(…);

8
2018-02-26 17:01



Sie können dies auch tun:

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

Und danach können Sie sich für Ihre Sammlung bewerben:

document.getElementById("niceParent").children.forEach(...)

1
2018-02-26 17:08