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

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

Um die Liste zu bearbeiten, z. B. mit forEach(), NodeListmuss zuerst die Liste in eine konvertiert werden Array.

Was ist der beste Weg, um das NodeListin ein umzuwandeln Array?

Mit ES6 können Sie einfach Folgendes tun:

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

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

Verwenden Sie eine ES6-Unterlegscheibe , damit dies auch in älteren Browsern funktioniert.

Wenn Sie einen Transpiler verwenden (zum Beispiel Babel), 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);
});

Sie können es mithilfe der sliceMethode aus dem ArrayPrototyp in ein Array konvertieren :

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

Wenn darüber hinaus alles , was Sie brauchen , ist forEach, können Sie aufrufen , dass aus dem ArrayPrototyp, ohne dass es zu einem Array Nötigung zuerst:

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

In ES6 können Sie die neue Array.fromFunktion verwenden, um sie in ein Array zu konvertieren:

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

Dies ist derzeit nur in hochmodernen Browsern der Fall. Wenn Sie jedoch einen Polyfill-Dienst verwenden , haben Sie auf der ganzen Linie Zugriff auf diese Funktion.

Wenn Sie einen ES6-Transpiler verwenden , können Sie for..ofstattdessen sogar eine Schleife verwenden:

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

Warum konvertieren? - nur callFunktion des Arrays direkt auf der Elementsammlung;)

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

vorausgesetzt $ ist Ihr Alias für querySelectorAll , natürlich

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

Muss es sein forEach? Sie können einfach eine forSchleife verwenden, um die Liste zu durchlaufen:

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

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

Ältere Browser können die unten stehende Polyfüllung verwenden.

Um die Liste in Javascript zu bearbeiten, z. B. 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 .forEach () von Array zu NodeList hinzufügen und es funktioniert einwandfrei :

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

Sie können jetzt ausführen:

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

Um wie bei Arrays über NodeLists zu iterieren.

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

ES6 erlaubt coole Wege wie, var nodeArray = Array.from(nodeList)aber mein Favorit ist der neue Spread-Operator.

var nodeArray = Array(...nodeList);

Das hat bei mir in ES6 funktioniert

Nehmen wir an, Sie haben eine solche Knotenliste

<ul>
  <li data-time="5:17">Flexbox video</li>
  <li data-time="8:22">Flexbox video</li>
  <li data-time="3:24">Redux video</li>
  <li data-time="5:17">Flexbox video</li>
  <li data-time="7:17">Flexbox video</li>
  <li data-time="4:17">Flexbox video</li>
  <li data-time="2:17">Redux video</li>
  <li data-time="7:17">Flexbox video</li>
  <li data-time="9:54">Flexbox video</li>
  <li data-time="5:53">Flexbox video</li>
  <li data-time="7:32">Flexbox video</li>
  <li data-time="2:47">Redux video</li>
  <li data-time="9:17">Flexbox video</li>

</ul>


const items = Array.from(document.querySelectorAll('[data-time]'));

console.log(items);

Ich benutze Folgendes, weil ich denke, dass es am einfachsten zu lesen ist:

const elements = document.getElementsByClassName('element');
[...elements].forEach((element) => {
   // code
});

Nun, das funktioniert auch bei mir:

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

Object.values()Rückgabe Arrayvon Werten eines bestimmten Objekts. NodeListist 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 eine beliebige Array-Methode auf Ihrem Computer aufrufenNodeList

Angenommen, elems ist eine Knotenliste:

var elems = document.querySelectorAll('select option:checked');

dann kann es wie folgt in ein Array umgewandelt werden:

var values = [].map.call(elems, function(obj) {
  return obj.value;
});

Referenz: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Example:_using_map_generically_querySelectorAll