Как перебрать все выбранные элементы в массив?

Опубликовано: 1 Декабря, 2021

Задача состоит в том, чтобы добавить все выбранные элементы HTML в массив и выполнить итерацию по массиву. Чтобы добиться этого, первым делом нужно выбрать все желаемые элементы. Есть несколько способов сделать это.

  • Поиск HTML-элементов по id:
     var myElement = document.getElementById ("идентификатор-элемента");
  • Поиск элементов HTML по имени тега:
     var myElements = document.getElementsByTagName ("div");
  • Поиск элементов HTML по имени класса:
     var myElements = document.getElementsByClassName ("элемент-класс");
  • Поиск элементов HTML с помощью селекторов CSS:

     var myElements = document.querySelectorAll ("имя-див.класса");

    Второй шаг включает перебор массива. Есть несколько способов сделать это:

  • Использование цикла for.
    array = [ a, b, c, d, e ];
    for (index = 0; index < array.length; index++) {
    console.log(array[index]);
    }
  • Использование цикла while.
    index = 0;
    array = [ a, b, c, d, e ];
    while (index < array.length) {
    console.log(array[index]);
    index++;
    }
  • Использование метода forEach.
    index = 0;
    array = [ a, b, c, d, e ];
    array.forEach(myFunction);
    function myFunction(item, index) {
    console.log(item);
    }

    Подход:
    Сначала используйте querySelectorAll , чтобы получить все элементы. Затем используйте forEach() и cloneNode() для перебора элементов.

    Пример 1:
    В этом подходе выберите все div из первого контейнера, добавьте их во второй контейнер.

  • Используйте querySelectorAll (), чтобы получить все элементы div в первом контейнере (список-1).
  • Нажмите кнопку (Click Me!), Чтобы выбрать элементы и добавить их во второй контейнер.
  • Выберите второй контейнер (список-2) с помощью querySelector ().
  • Прокрутите все элементы div с помощью метода forEach ().
  • Клонируйте каждый div с помощью метода cloneNode () и добавьте его во второй контейнер с помощью appendChild ()
    <!DOCTYPE html>
    < html >
    < head >
    < title >Demo</ title >
    < style >
    /* Basic styling */
    html {
    text-align: center;
    display: block;
    margin: 0 auto;
    }
    h1 {
    color: green;
    text-align: center;
    }
    .list-1,
    .list-2 {
    width: 240px;
    height: 120px;
    text-align: center;
    display: block;
    margin: 0 auto;
    background: lightgreen;
    border: 1px solid #000;
    }
    div,
    button {
    width: 80px;
    height: 20px;
    margin: 14px 78px;
    color: #fff;
    background: green;
    border: 1px solid #000;
    }
    </ style >
    </ head >
    < body >
    < h1 >GeeksforGeeks</ h1 >
    < div class = "list-1" >
    <!-- select elements from here -->
    < div >Element 1</ div >
    < div >Element 2</ div >
    < div >Element 3</ div >
    </ div >
    < button >Click Me!</ button >
    < div class = "list-2" >
    <!-- add the selected elements here -->
    </ div >
    < script >
    var divs = document.querySelectorAll('.list-1 > div');
    var button = document.querySelector('button');
    button.addEventListener("click", () => {
    var list_2 = document.querySelector('.list-2');
    divs.forEach((div) => {
    list_2.appendChild(div.cloneNode(true));
    })
    });
    </ script >
    </ body >
    </ html >

    Выход:
    Перед нажатием на кнопку:

    После нажатия на кнопку:

    Дополнительное примечание:
    querySelectorAll () - это не метод JavaScript, это API браузера, который позволяет вам получать доступ к элементам DOM. Этот метод возвращает список узлов, а не массив. Разница между NodeList и Array заключается в том, что NodeList - это независимый от языка способ доступа к элементам DOM, а Array - это объект JavaScript, который вы можете использовать для хранения коллекций материала.

    Чтобы преобразовать NodeList в массив:

     var divsArr = Array.prototype.slice.call (divs);