Ich versuche, ChildNodes wie folgt zu durchlaufen:
var children = element.childNodes;
children.forEach(function(item){
console.log(item);
});
Es wird jedoch ausgegeben Uncaught TypeError: undefined is not a function wegen forEach Funktion. Ich versuche auch zu verwenden children Anstatt von childNodes aber es hat sich nichts geändert.
Weiß jemand was los ist?
GillesC
Die Variable children ist ein NodeList Beispiel und NodeLists sind nicht wahr Array und deshalb erben sie die nicht forEach Methode.
Auch einige Browser unterstützen es tatsächlich nodeList.forEach
ES5
Sie können verwenden slice aus Array die umzuwandeln NodeList in ein richtiges Array.
var array = Array.prototype.slice.call(children);
Könnte man auch einfach verwenden call zu berufen forEach und pass es auf NodeList als Kontext.
[].forEach.call(children, function(child) {});
ES6
Du kannst den … benutzen from Methode zum Konvertieren Ihrer NodeList In ein Array.
Ein Hack, der verwendet werden kann, ist NodeList.prototype.forEach = Array.prototype.forEach und Sie können dann verwenden forEach mit jedem NodeList ohne sie jedes Mal umwandeln zu müssen.
NodeList.prototype.forEach = Array.prototype.forEach
var children = element.childNodes;
children.forEach(function(item){
console.log(item);
});
Wie kann ich NodeList in ein reines Array konvertieren?
– Benutzer3828771
16. Juli 2014 um 8:27 Uhr
Aktualisiert mit Beispiel, aber lesen Sie den Link, den ich gepostet habe, er erklärt alles 🙂
– GillesC
16. Juli 2014 um 8:28 Uhr
Alternativ können Sie Folgendes tun: [].forEach.call(element.childNodes, child => console.log(child))
– XåpplI’-I0llwlg’I –
3. Juni 2015 um 13:33 Uhr
Noch cooler es6-Weg: let items = [ ...children ] verwandelt es in ein Array
– zackifizieren
11. Juli 2016 um 0:36 Uhr
Es gibt ein großes Problem beim Anwenden von Array-Methoden auf NodeLists: NodeLists wie node.childNodes sind Live-Listen, und wenn Sie das DOM während Ihrer Schleife manipulieren, kann sich die NodeList ändern, was bedeutet, dass der Callback für forEach() nicht aufgerufen wird jedes Element der Liste – oder mehr Elemente als ursprünglich in der Liste – was zu unvorhersehbaren Ergebnissen führt. Es ist vorzuziehen, eine NodeList in ein Array umzuwandeln, bevor Sie es durchlaufen.
– Stufenband
15. Dezember 2016 um 13:57 Uhr
Ich bin sehr spät zur Party, aber da element.lastChild.nextSibling === nulldas Folgende scheint mir die einfachste Option zu sein:
Die einfachste Option ist die Verwendung einer regulären „for“-Schleife. Aber deine Option ist interessant.
– Kirill Reznikov
17. August 2016 um 21:47 Uhr
Das gefällt mir am besten, hatte vor, dasselbe zu implementieren. Logisch und ohne Konvertierungen erforderlich
– Ujjwal Singh
24. Juni 2020 um 12:48 Uhr
Hier ist, wie Sie es mit tun können for-in Schleife.
var children = element.childNodes;
for(child in children){
console.log(children[child]);
}
Sie haben vergessen zu prüfen: if (children.hasOwnProperty(child)) { //hier codieren } oder Sie werden über unerwünschte Requisiten wie “Länge” usw. iterieren!
– Kirill Reznikov
17. August 2016 um 21:38 Uhr
Noch besser: verwenden for ... of ...es ist jedoch die ES6-Syntax.
NodeList ist kein Array
aber NodeList.values() gibt einen Array-Iterator zurück, kann ihn also in Array konvertieren.
Konnte nicht widerstehen, eine weitere Methode hinzuzufügen, mit childElementCount. Es gibt die Anzahl der untergeordneten Elementknoten von einem bestimmten übergeordneten Element zurück, sodass Sie es durchlaufen können.
for(var i=0, len = parent.childElementCount ; i < len; ++i){
... do something with parent.children[i]
}
In acht nehmen, parent.childElementCount != parent.childNodes.length. childElementCount gibt die Anzahl von zurück Element Knoten und enthält keine Text- und Kommentarknoten usw. Siehe: w3schools.com/jsref/prop_element_childelementcount.asp
– Markieren
17. Februar 2021 um 9:56 Uhr
@Mark Wie es in der Antwort heißt: “gibt die Nummer des Kindes zurückElementKnoten“. Aber es ist gut, es zu betonen.
– Michel
17. Februar 2021 um 10:08 Uhr
Keine Bange. Technisch gesehen ist Ihre Antwort richtig, es geht darum Element zählen und Kinderaber ich wollte nur das Heads-up hinzufügen, da die ursprüngliche Frage ungefähr war Knoten. Zu viele Möglichkeiten, sich selbst ins Knie zu schießen 🙂
– Markieren
17. Februar 2021 um 12:51 Uhr
Versuche es mit for Schleife. Es gibt Fehler ein forEach weil es eine Sammlung von Knoten ist nodelist.
Oder dies sollte die Knotenliste in ein Array konvertieren
function toArray(obj) {
var array = [];
for (var i = 0; i < obj.length; i++) {
array[i] = obj[i];
}
return array;
}
Oder Sie können dies verwenden
var array = Array.prototype.slice.call(obj);
In acht nehmen, parent.childElementCount != parent.childNodes.length. childElementCount gibt die Anzahl von zurück Element Knoten und enthält keine Text- und Kommentarknoten usw. Siehe: w3schools.com/jsref/prop_element_childelementcount.asp
– Markieren
17. Februar 2021 um 9:56 Uhr
@Mark Wie es in der Antwort heißt: “gibt die Nummer des Kindes zurückElementKnoten“. Aber es ist gut, es zu betonen.
– Michel
17. Februar 2021 um 10:08 Uhr
Keine Bange. Technisch gesehen ist Ihre Antwort richtig, es geht darum Element zählen und Kinderaber ich wollte nur das Heads-up hinzufügen, da die ursprüngliche Frage ungefähr war Knoten. Zu viele Möglichkeiten, sich selbst ins Knie zu schießen 🙂
– Markieren
17. Februar 2021 um 12:51 Uhr
Versuche dies [reverse order traversal]:
var childs = document.getElementById('parent').childNodes;
var len = childs.length;
if(len --) do {
console.log('node: ', childs[len]);
} while(len --);
ODER [in order traversal]
var childs = document.getElementById('parent').childNodes;
var len = childs.length, i = -1;
if(++i < len) do {
console.log('node: ', childs[i]);
} while(++i < len);
Einfache For-Schleife ist besser lesbar als While-Schleife. Der Autor fragt nicht nach der Traversierung in umgekehrter/umgekehrter Reihenfolge.