Die Variable children
ist eine NodeList
Instanz und NodeList
s sind nicht wahr Array
und erben daher die forEach
Methode nicht.
Auch einige Browser unterstützen es tatsächlich nodeList.forEach
ES5
Sie können slice
von verwenden Array
, um das NodeList
in ein richtiges umzuwandeln Array
.
var array = Array.prototype.slice.call(children);
Sie können es auch einfach verwenden call
, um forEach
es NodeList
als Kontext aufzurufen und zu übergeben .
[].forEach.call(children, function(child) {});
ES6
Sie können die from
Methode verwenden, um Ihre NodeList
in 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.forEach
und Sie können ihn dann forEach
mit jedem verwenden, NodeList
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);
});
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 .
[].forEach.call(element.childNodes, child => console.log(child))
let items = [ ...children ]
wird es in ein ArrayIch bin sehr spät zur Party, aber seitdem
element.lastChild.nextSibling === null
scheint mir Folgendes die einfachste Option zu sein:for(var child=element.firstChild; child!==null; child=child.nextSibling) { console.log(child); }
quelle
Hier ist, wie Sie es mit
for-in
Schleife tun können .var children = element.childNodes; for(child in children){ console.log(children[child]); }
quelle
for ... of ...
Sie jedoch die ES6-Syntax.Versuchen Sie es mit
for
Schleife. Es gibt einen Fehler,forEach
da es sich um eine Sammlung von Knoten handeltnodelist
.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);
quelle
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] }
quelle
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.
quelle
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);
quelle
Hier ist eine funktionale ES6-Methode zum Iterieren über a
NodeList
. Diese Methode nutzt dieArray
‚s inforEach
etwa so:Array.prototype.forEach.call(element.childNodes, f)
Wo
f
ist 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.)quelle
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 ); } }; }
quelle