it-swarm.com.de

Schleife durch 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 function wegen forEach Funktion. Ich versuche auch, children anstelle von childNodes zu verwenden, aber nichts hat sich geändert.

Weiß jemand, was los ist?

63
user3828771

Die Variable children ist eine NodeList Instanz und NodeLists sind nicht wahr Array und daher auch sie Vererben Sie nicht die forEach -Methode.

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


ES5

Sie können slice von Array verwenden, um NodeList in ein richtiges Array zu konvertieren.

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

Sie können auch einfach call verwenden, um forEach aufzurufen und NodeList als Kontext zu übergeben.

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


ES6

Sie können die Methode from verwenden, um Ihr NodeList in ein Array zu konvertieren.

var array = Array.from(children);

Alternativ können Sie auch die Spread-Syntax ... verwenden

let array = [ ...children ];


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

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

Siehe Ein umfassender Einblick in NodeLists, Arrays, Konvertieren von NodeLists und Verstehen des DOM für eine gute Erklärung und andere Möglichkeiten, dies zu tun.

97
GillesC

Ich bin sehr spät zur Party, aber seit element.lastChild.nextSibling === null, das Folgende scheint mir die einfachste Option zu sein:

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

Hier ist, wie Sie es mit der Schleife for-in Machen können.

var children = element.childNodes;

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

Versuchen Sie es mit der Schleife for. Es gibt einen Fehler in forEach, weil es eine Sammlung von Knoten nodelist ist.

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);
3
Mritunjay
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.

2
Xu Qinghan

Hier ist eine funktionierende ES6-Methode zum Durchlaufen eines NodeList. Diese Methode verwendet das Array des forEach wie folgt:

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

Wobei f die Iteratorfunktion ist, die einen untergeordneten Knoten als ersten Parameter und den Index als zweiten empfängt.

Wenn Sie NodeLists mehrmals durchlaufen müssen, können Sie eine kleine funktionale Dienstprogrammmethode daraus 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.)

1
F Lekschas

Versuchen Sie Folgendes [Traversierung in umgekehrter Reihenfolge]:

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

ODER [um zu durchlaufen]

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

Konnte nicht widerstehen, eine andere Methode mit childElementCount hinzuzufügen. Es gibt die Anzahl der untergeordneten Elementknoten eines ü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]
    }
0
Michel

Wenn Sie so etwas häufig tun, ist es möglicherweise sinnvoll, die Funktion für sich 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 );
        }
    };
}
0
P Hemans