Який в JavaScript найкращий спосіб перетворити NodeList на масив?

Метод DOM document.querySelectorAll()(і кілька інших) повертає a 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);
});

Наразі це лише у браузерах, що перекриваються краями, але якщо ви користуєтеся послугою polyfill, ви матимете доступ до цієї функції по всьому форуму.

Якщо ви використовуєте транспілер 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 так само, як і масиви.

Це створює набагато коротший і чистіший код, ніж .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