JS Dom проблема манипулирования

Question

Итак, я создаю структуру генератора карусели и хочу сделать реализацию максимально простой для пользователя.Разработчик должен добавлять
изображений, не заботясь о дизайне / отзывчивости.Фреймворк должен взять каждое изображение и вставить его в div с именем класса «slide».В этом случае из этого кода:

<div id="album" class="album">
        <img src="./assets/img1.jpeg" alt="img1">
        <img src="./assets/img2.jpeg" alt="img2">
        <img src="./assets/img3.jpeg" alt="img3">
        <img src="./assets/img4.jpeg" alt="img4">
        <img src="./assets/img5.jpeg" alt="img5">
        <img src="./assets/img6.jpeg" alt="img6">
    </div>

фреймворк должен сгенерировать это:

<div class="slide">
        <img src="./assets/img1.jpeg" alt="img1">
    </div>
    <div class="slide">
        <img src="./assets/img2.jpeg" alt="img2">
    </div>
    <div class="slide">
        <img src="./assets/img3.jpeg" alt="img3">
    </div>
    <div class="slide">
        <img src="./assets/img4.jpeg" alt="img4">
    </div>
    <div class="slide">
        <img src="./assets/img5.jpeg" alt="img5">
    </div>
    <div class="slide">
        <img src="./assets/img6.jpeg" alt="img6">
    </div>

Но следующий код генерирует только 3 из 6 изображений:

    let album = document.getElementById("album");

let nextButton = document.getElementById('nextButton');
nextButton.addEventListener('', () => {
    album.scrollBy(window.innerWidth, 0);
})

Object.keys(album.children).forEach(key => {
    if (album.children[key].tagName === 'IMG') {
        let newDiv = document.createElement('div');
        newDiv.className = "slide";
        newDiv.append(album.children[key]);
        album.replaceChild(newDiv, album.children[key]);
    }
})

и имеет ошибку:

Uncaught TypeError: Cannot read property 'tagName' of undefined
    at Object.keys.forEach.key (index.js:9)
    at Array.forEach (<anonymous>)
    at index.js:8

и сгенерированная карусель:

Идеи?Заранее спасибо.

Answer 1

Это происходит потому, что .children создает живую коллекцию из узлов , поэтому итерация меняется, когда вы вставляете новые дочерние элементы div в forEach

вместо этого вы можете создать статическую коллекцию, например

let nodes = document.querySelectorAll('#album > img');

, и выполнить итерацию по этой коллекции узлов

let album = document.getElementById('album');
let nodes = document.querySelectorAll('#album > img');
Object.keys(nodes).forEach(i => {
   let slide = document.createElement('div');
   slide.className = 'slide';
   slide.appendChild(nodes[i]);
   album.appendChild(slide)
});

демонстрация Codepen

---

Сгенерированный источник: