JS Dom操纵问题

Question

所以我正在创建一个轮播生成器框架,我想让用户尽可能简单地实现.开发人员应该在
不关心设计/响应性的情况下添加图像.框架必须采用每个图像并将其插入到具有类别"幻灯片"的div中.在这种情况下,从这段代码:

<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>

但是以下代码仅生成6个图像中的3个:

    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演示

生成的源是