为什么 forEach 不允许我访问元素属性？

Question

使用简单的计数器来迭代集合工作得很好，但是当我尝试将其更改为使用 forEach 时，它失败了。有人能指出我正确的方向吗？ 这是代码（有问题的代码已被注释掉......第一个有效，第二个无效）

function slideImage(offset = 0) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let minCount = 1;
  let maxCount = slides.length;

  if (typeof index === "undefined") {
    index = 0;
  }

  index += offset;

  if (index > maxCount) {
    index = minCount;
  }

  if (index < minCount) {
    index = maxCount;
  }

  **// THIS PIECE OF CODE WORKS FINE (when uncommented obviously)
  //   for (i = 0; i < maxCount; i++) {
  //     slides[i].style.display = "none";
  //   }**

  **// WHEN I TRY TO USE FOREACH IT FAILS???
  // slides.forEach((c) => {
  //  c.style.display = "none";
  // });**


  slides[index - 1].style.display = "block";
}

幻灯片集合是 div，每个 div 都包含一个 img ..这是一个示例

<div class="mySlides fade">
  <img class="photo-one" src="/images/xxx.webp"/>
</div>
<div class="mySlides fade">
  <img class="photo-one" src="/images/xxx.webp"/>
</div>
<div class="mySlides fade">
  <img class="photo-one" src="/images/xxx.webp"/>
</div>

Answer 1

getElementsByClassName

返回一个

HTMLCollection

对象，它是一个可以循环的 array-like 对象。然而，它缺少像

forEach

这样的方法来循环对象中的值。

使用更强大的

querySelectorAll()

函数，该函数返回具有 NodeList

 方法的 

forEach。

let slides = document.querySelectorAll(".mySlides");

或者，您可以使用

HTMLCollection

 函数将 

Array.from 转换为数组，但我建议学习使用

querySelector

和

querySelectorAll

来查找元素。

Array.from(slides).forEach(slide => {
  slide.style.display = "none";
});

HTMLCollection

和

NodeList

之间的一个重要区别是，

HTMLCollection

是一个实时集合，这意味着每当您从文档中添加或删除具有您正在查询的类的元素时，它都会发生变化，而

NodeList

是找到的元素和调用时间的快照。

let slides = document.querySelectorAll(".mySlides");

slides.forEach(slide => {
  console.log(slide.className);
});

<div class="mySlides fade">
  <img class="photo-one" src="/images/xxx.webp"/>
</div>

<div class="mySlides pulse">
  <img class="photo-one" src="/images/xxx.webp"/>
</div>

<div class="mySlides flyin">
  <img class="photo-one" src="/images/xxx.webp"/>
</div>