Was ist in JavaScript der beste Weg, um eine NodeList in ein Array zu konvertieren?

Lesezeit: 6 Minuten

Benutzer-Avatar
cc jung

Die DOM-Methode document.querySelectorAll() (und ein paar andere) geben a zurück NodeList.

Um auf der Liste zu arbeiten, zB mit forEach()das NodeList muss erst in ein konvertiert werden Array.

Wie konvertiert man die am besten NodeList zu einem Array?

  • Ich denke, der Rückgabewert von querySelectorAll() wird technisch als NodeList bezeichnet.

    – jfriend00

    18. September 2011 um 6:00 Uhr

  • aus mdm “elementList = document.querySelectorAll(selectors);”

    – cc jung

    18. September 2011 um 6:06 Uhr

  • elementList ist der Variablenname. Dieselbe Seite beschreibt, wie der Typ des Rückgabewerts eine NodeList ist.

    – jfriend00

    18. September 2011 um 6:27 Uhr


  • danke für die Korrektur – in Frage behoben

    – cc jung

    18. September 2011 um 7:22 Uhr

  • siehe auch Schnellster Weg, JavaScript NodeList in Array umzuwandeln?

    – Bergi

    1. April 2015 um 18:40 Uhr

Mit ES6 können Sie einfach Folgendes tun:

const spanList = [...document.querySelectorAll("span")];

  • Das gibt mir Type 'NodeListOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.ts(2488)

    – zurückrufen

    9. August 2020 um 19:57 Uhr

  • Hallo @callback, das scheint ein TypeScript-bezogener Fehler zu sein. Möglicherweise haben Sie sich für die Kompilierung von es6 entschieden, ohne „es6“ im lib-Array Ihrer tsconfig-Datei hinzuzufügen. Grüße

    – Freezystem

    10. August 2020 um 11:31 Uhr

  • Hallo @Freezystem, du hast Recht! Ich strebe es2015 an. Vielen Dank!

    – zurückrufen

    10. August 2020 um 11:34 Uhr


  • @callback ES6 und ES2015 sind dasselbe

    – DarkNeuron

    14. Oktober 2020 um 11:40 Uhr

  • Nur ein Kopf hoch Sie müssen eine nodeList nicht in ein Array konvertieren, um forEach() zu verwenden – Siehe meine Antwort unten.

    – Mikemaccana

    15. April 2021 um 17:24 Uhr


Benutzer-Avatar
Sandstrom

Mit ES6 können Sie verwenden Array.from(myNodeList). Verwenden Sie dann Ihre bevorzugte Array-Methode.

var myNodeList = document.querySelectorAll('.my-selector');

// ALT 1
Array.from(myNodeList).forEach(function(el) {
  console.log(el);
});

Benutze ein ES6 Unterlegscheibe damit dies auch in älteren Browsern funktioniert.


Wenn Sie einen Transpiler (z. B. Babel) verwenden, gibt es zwei weitere Alternativen:

var myNodeList = document.querySelectorAll('.my-selector');

// ALT 2
for (var el of myNodeList) {
  el.classList.add('active'); // or some other action
}

// ALT 3
[...myNodeList].forEach((el) => {
  console.log(el);
});

  • gilt nicht auch unter es6, dass eine nodeList einen iterator liefert?

    – cc jung

    5. November 2015 um 10:04 Uhr

  • @ccyoung, aber der Iterator funktioniert nicht in nicht konformen ES6-Browsern, da Sie das Symbolobjekt nicht shimen können, daher ist es besser zu verwenden Array.from(myNodeList) denn es lässt sich schimmen.

    – Rok

    11. März 2016 um 12:10 Uhr


  • Ich habe also dieses Problem, bei dem Array.from(el.childNodes) den ersten Knoten nicht als Teil des Arrays zurückgibt.

    – zinoadidi

    28. Oktober 2018 um 7:44 Uhr

Benutzer-Avatar
Josef Silber

Sie können es in ein Array konvertieren, indem Sie die verwenden slice Methode aus der Array Prototyp:

var elList = document.querySelectorAll('.viewcount');
elList = Array.prototype.slice.call(elList, 0);

Darüber hinaus, wenn alles, was Sie brauchen, ist forEachkönnen Sie aufrufen das von dem Array Prototyp, ohne ihn zuerst in ein Array zu zwingen:

var elList = document.querySelectorAll('.viewcount');
Array.prototype.forEach.call(elList, function(el) {
    console.log(el);
});

In ES6 können Sie die neue verwenden Array.from Funktion, um es in ein Array umzuwandeln:

Array.from(elList).forEach(function(el) {
    console.log(el);
});

Dies ist derzeit nur in hochmodernen Browsern möglich, aber wenn Sie es sind Verwenden eines Polyfill-Dienstes Auf diese Funktion haben Sie flächendeckend Zugriff.


Wenn Sie verwenden ein ES6-TranspilerSie können sogar a verwenden for..of Schleife stattdessen:

for (var element of document.querySelectorAll('.some .elements')) {
  // use element here
}

  • Danke. Unter neuerem Javascript dachte / hoffte, dass es einen prägnanteren Zwang gab.

    – cc jung

    18. September 2011 um 5:51 Uhr

  • @cc young – Beachten Sie den Grund, den ich verwende Array.prototype.forEach Anstatt von [].forEachliegt daran, dass letzteres ein neues Array-Objekt erstellt, was völlig unnötig ist.

    – Josef Silber

    18. September 2011 um 23:01 Uhr

  • @JosephSilber ahh danke – das neue Array, das erstellt wird, ist leer []? Ich denke, es würde Müll gesammelt und die Auswirkungen auf den Speicher sind vernachlässigbar. Kann jemand etwas dazu sagen?

    – Daniel Sokolowski

    25. April 2015 um 16:21 Uhr

  • @Daniel das ist wahr, aber es gibt immer noch die Berechnung des Erstellens und Zerstörens des Arrays.

    – Brett

    10. Oktober 2015 um 0:49 Uhr

Benutzer-Avatar
c69

Warum konvertieren? – nur call Funktion von Array direkt auf Elementsammlung 😉

[].forEach.call( $('a'), function( v, i) {
    // do something
});

vorausgesetzt $ ist Ihr Alias ​​für querySelectorAllNatürlich


Bearbeiten: ES6 ermöglicht eine noch kürzere Syntax [...$('a')] (funktioniert nur in Firefox, Stand Mai 2014)

Benutzer-Avatar
mikemaccana

Aktualisierung 2020: nodeList.forEach() ist jetzt ein offizieller Standard und in allen aktuellen Browsern unterstützt.

Ältere Browser können das unten stehende Polyfill verwenden.

Um die Liste in Javascript zu bearbeiten, zB mit forEach(), muss die NodeList in ein Array konvertiert werden.

Das ist nicht wahr. .forEach() funktioniert in aktuellen Browsern. Wenn es fehlt, können Sie eine Polyfüllung verwenden, um .forEach() von hinzuzufügen Array zu Knotenliste und es funktioniert gut:

if ( ! NodeList.prototype.forEach ) {
  NodeList.prototype.forEach = Array.prototype.forEach;
}

Sie können jetzt ausführen:

myNodeList.forEach(function(node){...})

NodeLists genau wie Arrays durchlaufen.

Dies erzeugt überall viel kürzeren und saubereren Code als .call().

  • Diese Antwort war genau das, was ich brauchte, und diese 3 Zeilen haben viel Zeit gespart. Alle anderen Antworten hätten eine Reihe von Codeänderungen erfordert, und ich verstehe nicht, warum.

    – Scribblemacher

    15. Oktober 2018 um 18:00 Uhr

  • Downvotes waren wahrscheinlich, weil das Patchen von eingebauten Prototypen durch Affen als schlechte Praxis angesehen wird

    – DuBistKomisch

    14. Oktober 2020 um 4:04 Uhr

  • @DuBistKomisch Dies ist ein Polyfill, das nur angewendet wird, wenn die Standard-NodeList.foreach() nicht existiert.

    – Mikemaccana

    14. Oktober 2020 um 9:27 Uhr

  • ah mein schlechtes, wusste nicht, dass sie tatsächlich hinzugefügt wurden forEach speziell bin ich hierher gekommen, um zu suchen filter

    – DuBistKomisch

    15. Oktober 2020 um 22:29 Uhr

  • @DuBistKomisch kannst du die gleiche Technik für verwenden filteraber vielleicht möchten Sie ihm einen inoffiziellen Namen geben NodeList.prototype.dbkFilter oder ähnliches, wenn Sie sich Sorgen über einen zukünftigen Standard machen, der eine andere Implementierung verwendet.

    – Mikemaccana

    27. Oktober 2020 um 17:02 Uhr


Benutzer-Avatar
Timo Tijhof

Muss es sein forEach? Du könntest einfach a verwenden for Schleife, um die Liste zu durchlaufen:

for (var i = 0; i < elementList.length; i++) {
    doSomethingWith(elementlist.item(i));
}

  • Diese Antwort war genau das, was ich brauchte, und diese 3 Zeilen haben viel Zeit gespart. Alle anderen Antworten hätten eine Reihe von Codeänderungen erfordert, und ich verstehe nicht, warum.

    – Scribblemacher

    15. Oktober 2018 um 18:00 Uhr

  • Downvotes waren wahrscheinlich, weil das Patchen von eingebauten Prototypen durch Affen als schlechte Praxis angesehen wird

    – DuBistKomisch

    14. Oktober 2020 um 4:04 Uhr

  • @DuBistKomisch Dies ist ein Polyfill, das nur angewendet wird, wenn die Standard-NodeList.foreach() nicht existiert.

    – Mikemaccana

    14. Oktober 2020 um 9:27 Uhr

  • ah mein schlechtes, wusste nicht, dass sie tatsächlich hinzugefügt wurden forEach speziell bin ich hierher gekommen, um zu suchen filter

    – DuBistKomisch

    15. Oktober 2020 um 22:29 Uhr

  • @DuBistKomisch kannst du die gleiche Technik für verwenden filteraber vielleicht möchten Sie ihm einen inoffiziellen Namen geben NodeList.prototype.dbkFilter oder ähnliches, wenn Sie sich Sorgen über einen zukünftigen Standard machen, der eine andere Implementierung verwendet.

    – Mikemaccana

    27. Oktober 2020 um 17:02 Uhr


Benutzer-Avatar
René Stefancik

Nun, das funktioniert bei mir auch:

const elements = Object.values( document.querySelector(your selector here) )

Object.values() kehrt zurück Array von Werten eines bestimmten Objekts. NodeList ist Objekt, wie alles in JS.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values

Aber es ist nicht kompatibel mit IE, also denke ich Array.prototype.*array_method*.call(yourNodeList) ist die beste Option. Damit können Sie jede Array-Methode auf Ihrem aufrufen NodeList

1226700cookie-checkWas ist in JavaScript der beste Weg, um eine NodeList in ein Array zu konvertieren?

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

Privacy policy