Durchlaufen Sie childNodes

Ich versuche, childNodes wie folgt zu durchlaufen:

var children = element.childNodes;
children.forEach(function(item){
    console.log(item);
});

Es wird jedoch Uncaught TypeError: undefined is not a functionaufgrund der forEachFunktion ausgegeben . Ich versuche auch zu verwenden , childrenanstatt childNodesaber nichts geändert.

Weiß jemand was los ist?

Die Variable childrenist eine NodeListInstanz und NodeLists sind nicht wahr Arrayund erben daher die forEachMethode nicht.

Auch einige Browser unterstützen es tatsächlich nodeList.forEach

ES5

Sie können slicevon verwenden Array, um das NodeListin ein richtiges umzuwandeln Array.

var array = Array.prototype.slice.call(children);

Sie können es auch einfach verwenden call, um forEaches NodeListals Kontext aufzurufen und zu übergeben .

[].forEach.call(children, function(child) {});

ES6

Sie können die fromMethode verwenden, um Ihre NodeListin eine zu konvertieren Array.

var array = Array.from(children);

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

let array = [ ...children ];

Ein Hack, der verwendet werden kann, ist NodeList.prototype.forEach = Array.prototype.forEachund Sie können ihn dann forEachmit jedem verwenden, NodeListohne sie jedes Mal konvertieren zu müssen.

NodeList.prototype.forEach = Array.prototype.forEach
var children = element.childNodes;
children.forEach(function(item){
    console.log(item);
});

Eine ausführliche Erklärung und andere Möglichkeiten finden Sie unter Ein umfassender Einblick in NodeLists, Arrays, Konvertieren von NodeLists und Verstehen des DOM .

Ich bin sehr spät zur Party, aber seitdem element.lastChild.nextSibling === nullscheint mir Folgendes die einfachste Option zu sein:

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

Hier ist, wie Sie es mit for-inSchleife tun können .

var children = element.childNodes;

for(child in children){
    console.log(children[child]);
}

Versuchen Sie es mit forSchleife. Es gibt einen Fehler, forEachda es sich um eine Sammlung von Knoten handelt 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);

Konnte nicht widerstehen, eine andere Methode mit hinzuzufügen childElementCount. Es gibt die Anzahl der untergeordneten Elementknoten eines bestimmten übergeordneten Elements zurück, sodass Sie eine Schleife darüber durchführen können.

for(var i=0, len = parent.childElementCount ; i < len; ++i){
    ... do something with parent.children[i]
    }

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

NodeList ist kein Array, aber NodeList.values ​​() gibt einen Array-Iterator zurück und kann ihn in Array konvertieren.

Versuchen Sie dies [Durchquerung in umgekehrter Reihenfolge]:

var childs = document.getElementById('parent').childNodes;
var len = childs.length;
if(len --) do {
    console.log('node: ', childs[len]);
} while(len --);

ODER [in der Reihenfolge Durchquerung]

var childs = document.getElementById('parent').childNodes;
var len = childs.length, i = -1;
if(++i < len) do {
    console.log('node: ', childs[i]);
} while(++i < len);

Hier ist eine funktionale ES6-Methode zum Iterieren über a NodeList. Diese Methode nutzt die Array‚s in forEachetwa so:

Array.prototype.forEach.call(element.childNodes, f)

Wo fist die Iteratorfunktion, die einen untergeordneten Knoten als ersten Parameter und den Index als zweiten empfängt?

Wenn Sie NodeLists mehrmals durchlaufen müssen, können Sie daraus eine kleine funktionale Dienstprogrammmethode erstellen:

const forEach = f => x => Array.prototype.forEach.call(x, f);

// For example, to log all child nodes
forEach((item) => { console.log(item); })(element.childNodes)

// The functional forEach is handy as you can easily created curried functions
const logChildren = forEach((childNode) => { console.log(childNode); })
logChildren(elementA.childNodes)
logChildren(elementB.childNodes)

(Sie können den gleichen Trick für map()und andere Array-Funktionen ausführen.)

Wenn Sie so etwas häufig tun, lohnt es sich möglicherweise, die Funktion selbst zu definieren.

if (typeof NodeList.prototype.forEach == "undefined"){
    NodeList.prototype.forEach = function (cb){
        for (var i=0; i < this.length; i++) {
            var node = this[i];
            cb( node, i );
        }
    };
}