Javascript 尝试将类设置为下一个元素时出现问题

我在一个模式窗口中创建一个图库，当我试图将一个类设置为下一个元素时，它给出了一个错误“无法读取null的属性'classList'。我怎样才能解决这个问题

HTML
<div class="card-page__imgs">
   <img id="1" href="assets/img/card-page-main-img.png" class="card-page__main-img gallery-img" 
   src="assets/img/card-page-main-img.png" alt="Изображение">
   <div class="card-page__img-group">
      <img id="2" src="assets/img/card-page-img1.png" class="card-page__second-img gallery-img next-img">
      <img id="3" src="assets/img/card-page-img2.png" class="card-page__second-img gallery-img">
      <img id="4" src="assets/img/card-page-img3.png" class="card-page__second-img gallery-img">
   </div>
</div>

---

你不能做

const nextElem=el.nextElementSibling

因为您已将节点列表转换为数组，所以

NextElementsibling

属性不起作用，但是您仍然可以使用

forEach

迭代节点列表，因此如果您从（GalleryImage）中删除

常量galleryImagesArr=array

只需使用

galleryImages

代替

galleryImagesArr

即可

编辑 错误是由于尝试在数组末尾读取下一个同级，因此返回null而不是换行到开始，使用简单的IF语句修复了此问题

像这样

const galleryBtnPrev = document.querySelector('.gallery__btn_prev'),
    galleryBtnNext = document.querySelector('.gallery__btn_next'),
    galleryMainImg = document.querySelector('.gallery__main-img'),
    galleryImages = document.querySelectorAll('.gallery-img');

const showNext = () => {
    galleryImages.forEach((el, i) => {
        //if(el.classList.contains('next'))
        const nextSrc = el.getAttribute('src');
        if(el.classList.contains('next-img')) {
            //galleryMainImg.setAttribute('src', nextSrc);
            el.classList.remove('next-img');
            // el.classList.add('next-img');
            var nextElem = el.nextElementSibling
            if (nextElem === null) {
              nextElem = galleryImages[0]
            }
            nextElem.classList.add('next-img'); 
            return false;
        }
        // console.log(el, i);
    });
};
showNext()

---

删除了转换，正如您所说，仍然是相同的错误

const galleryBtnPrev = document.querySelector('.gallery__btn_prev'),
    galleryBtnNext = document.querySelector('.gallery__btn_next'),
    galleryMainImg = document.querySelector('.gallery__main-img'),
    galleryImages = document.querySelectorAll('.gallery-img');

const showNext = () => {
    galleryImages.forEach((el, i) => {
        //if(el.classList.contains('next'))
        const nextSrc = el.getAttribute('src');
        if(el.classList.contains('next-img')) {
            //galleryMainImg.setAttribute('src', nextSrc);
            el.classList.remove('next-img');
            // el.classList.add('next-img');
            var nextElem = el.nextElementSibling
            if (nextElem === null) {
              nextElem = galleryImages[0]
            }
            nextElem.classList.add('next-img'); 
            return false;
        }
        // console.log(el, i);
    });
};
showNext()