DevGang
Авторизоваться

Преобразование NodeList JavaScript в массив: простое руководство

NodeList действительно надежный друг. Но подождите, они не такие гибкие, как ваши обычные массивы. Иногда при кодировании вы можете применить в своем проекте определенные методы и приемы. Однако NodeList не всегда позволяет легко выполнить эти задачи, тогда как ArrayList более удобен. В таких случаях вам могут понадобиться навыки, чтобы преобразовать их и привести в соответствие со стандартами ваших проектов. В этой статье мы узнаем, как решить эту проблему. Итак, начнем!

Введение в NodeList

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

NodeList обычно встречается в различных сценариях веб-разработки:

  • Элементы выбираются с помощью таких методов, как querySelectorAll() или getElementsByTagName(), которые возвращают NodeList, который представляет собой коллекцию выбранных элементов DOM.
  • Обход DOM включает в себя перебор дочерних узлов или использование таких методов, как childNodes, в результате чего создается еще один NodeList.
  • Для обработки событий NodeList используется при сборе элементов, на которые влияет событие, например, из getElementsByClassName().

Примеры запросов DOM, возвращающих объекты NodeList

Использование querySelectorAll():

const animals = document.querySelectorAll('.Animal-class');
// 'animals' is a NodeList containing all elements with the class 'Animal-class'

Доступ к дочерним узлам:

const animal1 = document.getElementById('Dog');
const childNodes = animal1.childNodes;
// 'childNodes' is a NodeList containing all child nodes of 'animal1'

Получение элементов по имени тега:

const paragraphs = document.getElementsByTagName('p');
// 'paragraphs' is a NodeList containing all 'p' elements in the document

Зачем нам нужно преобразование списка узлов JavaScript в массив?

Теперь, когда вы знаете, что такое NodeList, давайте повеселимся и создадим его! Представьте, что мы создаем HTML-файл и добавляем список из 10 самых любимых тортов и кондитерских изделий.

Код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sweet Time!</title>
</head>
<body>
    <ul><li class="Sweet Cake">Chocolate Cake</li>
    <li class="Sweet Cake">Cheesecake</li>
    <li class="Sweet Cake">Red Velvet Cake</li>
    <li class="Sweet Cake">Ice Cream Cake</li>
    <li class="Sweet Cake">Cupcakes</li>
    <li class="Sweet confectionery">Macarons</li>
    <li class="Sweet confectionery">Éclairs</li>
    <li class="Sweet confectionery">Brownies</li>
    <li class="Sweet confectionery">Donuts</li>
    <li class="Sweet confectionery">Fruit pie</li></ul>
</body>
<script>
    //Let's grab all the sweet items first!!
    const allsweets = document.querySelectorAll('.Sweet');
    console.log(allsweets)// Nodelist
</script>
</html>

Выход:

Итак, как вы можете видеть, это выводит все наши полезные элементы в виде NodeList. Тот факт, что NodeList не является массивом, может быть проблематичным, поскольку списки узлов поддерживают только несколько выбранных методов: .items, .keys и .values. Хотя они полезны, мы могли бы использовать для них .filter. Давайте попробуем использовать .filter и посмотрим, что произойдет. Мы постараемся отфильтровать торты.

<script>
    //Let's grab all the sweet item first!!
    const allsweets = document.querySelectorAll('.Sweet');
    console.log(allsweets)// Nodelist
 
    const Cakesweet = allsweets.filter((node) => {
        if(node.classList[1] === 'Cake'){
            return true;
        }
        return false;
    });
</script>

Выход:

К сожалению, мы получили ошибку, потому что allsweets — это NodeList, а не массив. Чтобы использовать такие функции, как .filter, нам нужно преобразовать NodeList в массив.

В NodeList отсутствуют важные методы и свойства массива, такие как map(), filter(), forEach() и length. В нем отсутствуют некоторые удобные функции массивов, что делает его менее гибким для обработки групп элементов DOM. Чтобы более эффективно работать с элементами DOM, разработчики часто преобразуют NodeList в массив. Это преобразование позволяет им использовать множество полезных методов работы с массивами, делая такие задачи, как фильтрация, сопоставление и перебор элементов, более простыми и универсальными.

Теперь, когда мы знаем необходимость преобразования, давайте на том же примере рассмотрим некоторые полезные методы преобразования.

Методы преобразования списка узлов JavaScript в массив

1. Array.from

Array.from в JavaScript — это метод, который превращает NodeList или строки в простые в использовании массивы, что позволяет использовать к ним методы и свойства массива. Это наиболее удобный метод преобразования. Давайте посмотрим, как это сделать.

Синтаксис:

Код:

<script>
    //Let's grab all the sweet item first!!
    const allsweets = document.querySelectorAll('.Sweet');
    console.log(allsweets)// Nodelist
 
    const allsweetsArray = Array.from(allsweets);
 
    const Cakesweet = allsweetsArray.filter((node) => {
        if(node.classList[1] === 'Cake'){
            return true;
        }
        return false;
    })
    console.log(Cakesweet);
</script>

Выход:

Метод .filter теперь работает, поскольку данные успешно преобразуются в массив при использовании Array.form.

2. Оператор распространения

Оператор распространения:

...

В JavaScript помогает преобразовать NodeList в массив. Это своего рода волшебный инструмент для преобразования коллекций, упрощающий работу с ними методами с помощью массива. Давайте посмотрим, как это работает, и на этот раз попробуем отфильтровать кондитерские изделия.

Синтаксис:

Код:

<script>
    //Let's grab all the sweet item first!!
    const allsweets = document.querySelectorAll('.Sweet');
    console.log(allsweets)// Nodelist
 
    // Convert NodeList to an array using the spread operator
    const allsweetsArray = [...allsweets];
 
    const Confectionerysweet = allsweetsArray.filter((node) => {
        if(node.classList[1] === 'confectionery'){
            return true;
        }
        return false;
    })
    console.log(Confectionerysweet);
</script>

Выход:

3. Array.prototype.slice.call()

Array.prototype.slice.call — это более старый метод, который превращает объекты, похожие на массивы, такие как NodeList, в настоящие массивы, заимствуя приемы из массивов. Сейчас он используется нечасто, потому что новые методы, такие как оператор распространения или Array.from, проще и интереснее. Но эй, полезно знать и о старых трюках!

Синтаксис:

Давайте добавим в список «Темный шоколад» и попробуем отфильтровать его как категорию шоколада.

Код:

<script>
    //Let's grab all the sweet item first!!
    const allsweets = document.querySelectorAll('.Sweet');
    console.log(allsweets)// Nodelist
 
    // Convert NodeList to an array using the spread operator
    var allsweetsArray = Array.prototype.slice.call(allsweets);
 
    const Chocolatesweet = allsweetsArray.filter((node) => {
        if(node.classList[1] === 'chocolate'){
            return true;
        }
        return false;
    })
    console.log(Chocolatesweet);
</script>

Выход:

Краткое содержание

Хорошо, вот и все! Теперь вы знаете три способа преобразования NodeList в массив. Возможно, вы также поняли концепцию NodeList и почему важно преобразовать его в массив. Если вам понравилось читать эту статью, возможно, вам также понравятся некоторые из перечисленных ниже.

Дальнейшее чтение:

Источник:

#JavaScript #NodeJS #HTML
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

В этом месте могла бы быть ваша реклама

Разместить рекламу