Как преобразовать nodelist в массив js

Аватар пользователя Кирилл Маркеев
Кирилл Маркеев
18 октября 2022

nodeList - это массивоподобная коллекция узлов, которая возвращается методом document.querySelectorAll().

Сходство с обычным массивом заключается в том, что по nodeList можно проитерироваться методом forEach(), а различия в том, что для nodeList недоступны такие методы массивов, как map(), filter() и reduce().

Для обхода этого ограничения мы можем преобразовать nodeList в массив, используя spread оператор или метод Array.from().

  • Преобразование с помощью spread оператора:
const divList = document.querySelectorAll('div');
const arr = [...divList];
  • То же самое с помощью метода Array.from()
const arr = Array.from(divList);
1 0
Аватар пользователя Ivan Gagarinov
Ivan Gagarinov
26 ноября 2021

Для преобразования в массив NodeList можно итерировать в цикле:

const nodeList = document.querySelectorAll('div');
const result = [];
for (const node of nodeList) {
  result.push(node);
}
console.log(result); // => [div#root, div.page-wrapper.document-page, ...]

Также у NodeList есть метод forEach:

const nodeList = document.querySelectorAll('div');
const result = [];
nodeList.forEach((node) => {
  result.push(node);
});
console.log(result); // => [div#root, div.page-wrapper.document-page, ...]

И самый простой способ преобразовать в массив, это использовать Array.from():

const nodeList = document.querySelectorAll('div');
const result = Array.from(nodeList);
console.log(result); // => [div#root, div.page-wrapper.document-page, ...]
1 0
Познакомьтесь с основами JavaScript бесплатно