Jaki jest najlepszy sposób konwersji NodeList na tablicę w JavaScript?

Metoda DOM document.querySelectorAll()(i kilka innych) zwraca plik NodeList.

Aby operować na liście, np. Używając forEach(), NodeListnależy najpierw przekonwertować plik Array.

Jaki jest najlepszy sposób konwertowania NodeListpliku na Array?

Dzięki ES6 możesz po prostu:

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

Z ES6 możesz korzystać Array.from(myNodeList). Następnie użyj swojej ulubionej metody tablicowej.

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

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

Użyj podkładki ES6, aby to działało również w starszych przeglądarkach.

Jeśli używasz transpilera (na przykład Babel), są jeszcze dwie alternatywy:

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

Możesz przekonwertować go na tablicę używając slicemetody z Arrayprototypu:

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

Ponadto, jeśli wszystko, czego potrzebujesz forEach, to możesz wywołać to z Arrayprototypu, bez uprzedniego przekształcania go w tablicę:

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

W ES6 możesz użyć nowej Array.fromfunkcji, aby przekonwertować ją na tablicę:

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

Jest to obecnie dostępne tylko w przeglądarkach krwawiących krawędzi, ale jeśli korzystasz z usługi polyfill , będziesz mieć dostęp do tej funkcji na całej planszy.

Jeśli używasz transpilera ES6 , możesz for..ofzamiast tego użyć pętli:

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

Dlaczego warto konwertować? - po prostu callfunkcja Array bezpośrednio na kolekcji elementów;)

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

zakładając oczywiście, że $ jest twoim aliasem dla querySelectorAll

edycja: ES6 pozwala na jeszcze krótszą składnię [...$('a')]( działa tylko w Firefoksie, od maja 2014 )

Aktualizacja 2020: nodeList.forEach () jest teraz oficjalnym standardem i jest obsługiwany we wszystkich obecnych przeglądarkach.

Starsze przeglądarki mogą używać poniższego wypełnienia.

Aby operować na liście w javascript, np. Używając forEach (), NodeList musi zostać przekonwertowana na Array.

To nieprawda. .forEach()działa w obecnych przeglądarkach. Jeśli go brakuje, możesz użyć polyfill, aby dodać .forEach () z Array do NodeList i działa dobrze:

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

Możesz teraz biegać:

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

Aby iterować po NodeLists, tak jak Arrays.

Daje to znacznie krótszy i czystszy kod niż .call () wszędzie.

Czy to musi być forEach? Możesz po prostu użyć forpętli do iteracji po liście:

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

ES6 pozwala na fajne sposoby, takie jak, var nodeArray = Array.from(nodeList)ale moim ulubionym jest nowy operator rozprzestrzeniania.

var nodeArray = Array(...nodeList);

To zadziałało ze mną w ES6

załóżmy, że masz taką listę węzłów

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

Używam następujących, ponieważ wydaje mi się, że najłatwiej jest to przeczytać:

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

Cóż, to działa również dla mnie:

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

Object.values()zwraca Arraywartości danego obiektu. NodeListjest obiektem, tak jak wszystko w JS.

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

Ale nie jest kompatybilny z IE, więc myślę, że Array.prototype.*array_method*.call(yourNodeList)jest to najlepsza opcja. Dzięki temu możesz wywołać dowolną metodę tablicową na swoimNodeList

Zakładając, że element jest węzłemList:

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

następnie można go przekształcić w tablicę w następujący sposób:

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

Źródła: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Example:_using_map_generically_querySelectorAll