В Javascript, каков наилучший способ преобразования списка узлов в массив

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

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

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

использовать ES6 shim чтобы сделать эту работу в старых браузерах тоже.

---

Если вы используете транспилер (например, 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);
});

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

---

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

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

зачем переводить? - просто

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

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

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

- Это не совсем так. Вы можете добавить .по каждому элементу() из массив до NodeList и он отлично работает:

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

Теперь вы можете работать:

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

для перебора элементов как массивы.

это производит гораздо короче и чище код, чем .звоните() везде.

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

var nodeArray = Array(...nodeList);

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

предположим, что у вас есть nodelist, как это

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

предполагая, что 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