Как перебрать все выбранные элементы в массив?
Задача состоит в том, чтобы добавить все выбранные элементы HTML в массив и выполнить итерацию по массиву. Чтобы добиться этого, первым делом нужно выбрать все желаемые элементы. Есть несколько способов сделать это.
var myElement = document.getElementById ("идентификатор-элемента");
var myElements = document.getElementsByTagName ("div");
var myElements = document.getElementsByClassName ("элемент-класс");
var myElements = document.querySelectorAll ("имя-див.класса");
Второй шаг включает перебор массива. Есть несколько способов сделать это:
array = [ a, b, c, d, e ]; for (index = 0; index < array.length; index++) { console.log(array[index]); } |
index = 0; array = [ a, b, c, d, e ]; while (index < array.length) { console.log(array[index]); index++; } |
index = 0; array = [ a, b, c, d, e ]; array.forEach(myFunction); function myFunction(item, index) { console.log(item); } |
Подход:
Сначала используйте querySelectorAll
, чтобы получить все элементы. Затем используйте forEach()
и cloneNode()
для перебора элементов.
Пример 1:
В этом подходе выберите все div
из первого контейнера, добавьте их во второй контейнер.
<!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);