Как лучше всего преобразовать NodeList в массив в JavaScript?

Метод DOM document.querySelectorAll()(и некоторые другие) возвращаютNodeList .

Чтобы работать со списком, например, используя forEach(), NodeListнеобходимо сначала преобразовать вArray .

Какой самый лучший способ преобразовать NodeListАня Array?

С ES6 вы можете просто:

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

С ES6 вы можете использовать Array.from(myNodeList). Затем используйте свой любимый метод массива.

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

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

Используйте прокладку ES6, чтобы это работало и в старых браузерах.

Если вы используете транспилятор (например, Babel), есть еще две альтернативы:

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

Вы можете преобразовать его в массив, используя sliceметод из Arrayпрототипа:

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

Кроме того, если все, что вам нужно forEach, вы можете вызвать это из Arrayпрототипа, не принуждая его сначала к массиву:

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

В ES6 вы можете использовать новую Array.fromфункцию для преобразования его в массив:

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

В настоящее время это есть только в современных браузерах, но если вы используете службу полифиллов, у вас будет доступ к этой функции во всех направлениях.

Если вы используете транспилятор ES6 , вы можете даже использовать for..ofвместо него цикл:

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

Зачем конвертировать? - просто callфункция Array прямо на коллекции элементов;)

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

при условии, что $ - это ваш псевдоним для querySelectorAll , конечно

изменить: ES6 позволяет использовать еще более короткий синтаксис [...$('a')]( работает только в Firefox с мая 2014 г. )

Обновление 2020: nodeList.forEach () теперь является официальным стандартом и поддерживается во всех текущих браузерах.

Старые браузеры могут использовать полифил, указанный ниже.

Чтобы работать со списком в javascript, например, используя forEach (), NodeList должен быть преобразован в массив.

Это не правда. .forEach()работает в текущих браузерах. Если он отсутствует, вы можете использовать полифилл для добавления .forEach () из массива в NodeList, и он отлично работает:

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

Теперь вы можете запустить:

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

Чтобы перебирать NodeLists так же, как Arrays.

Это дает намного более короткий и чистый код, чем везде .call ().

Так должно быть forEach? Вы можете просто использовать forцикл для перебора списка:

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

ES6 позволяет использовать такие классные способы, как, var nodeArray = Array.from(nodeList)но мой любимый - новый оператор распространения.

var nodeArray = Array(...nodeList);

Это работало со мной в ES6

Предположим, у вас есть такой нодлист

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

Я использую следующее, потому что считаю, что его легче всего читать:

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

У меня тоже работает:

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

Object.values()возвращает Arrayзначения данного объекта. NodeListявляется объектом, как и все в JS.

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

Но он несовместим с IE, так что я думаю, Array.prototype.*array_method*.call(yourNodeList)это лучший вариант. С его помощью вы можете вызвать любой метод массива на своемNodeList

Предполагая, что elems - это nodeList:

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

тогда его можно превратить в массив следующим образом:

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

Ссылка: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Example:_using_map_generically_querySelectorAll