Durchlaufen Sie childNodes

Lesezeit: 5 Minuten

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?

Benutzer-Avatar
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.

var array = Array.from(children);

Oder Sie können auch die verwenden Spread-Syntax ... wie so

let array = [ ...children ];


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);
});

Sehen Ein umfassender Einblick in NodeLists, Arrays, das Konvertieren von NodeLists und das Verständnis des DOM für eine gute Erklärung und andere Möglichkeiten, es zu tun.

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

for(var child=element.firstChild; child!==null; child=child.nextSibling) {
    console.log(child);
}

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

    – Jespertheend

    13. Januar 2018 um 12:59 Uhr


const results = Array.from(myNodeList.values()).map(parser_item);

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ück Element Knoten“. 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ück Element Knoten“. 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.

    – Kirill Reznikov

    17. August 2016 um 21:51 Uhr

1216000cookie-checkDurchlaufen Sie childNodes

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy