为何forEach无法访问元素属性？getElementsByClassName集合遍历问题

你用getElementsByClassName获取的slides是HTMLCollection类型，它不是数组，没有内置的forEach方法，直接调用会报错。普通for循环能运行是因为HTMLCollection支持按索引访问，且具备length属性。

三种可行解决办法 #

1. 将HTMLCollection转为数组 #

用Array.from()或扩展运算符[...]把集合转成数组，就能使用forEach：

// 方式一：Array.from转换
Array.from(slides).forEach((c) => {
  c.style.display = "none";
});

// 方式二：扩展运算符转换
[...slides].forEach((c) => {
  c.style.display = "none";
});

2. 使用for...of循环 #

HTMLCollection是可迭代对象，直接用for...of循环遍历：

for (const slide of slides) {
  slide.style.display = "none";
}

3. 改用querySelectorAll获取元素 #

document.querySelectorAll(".mySlides")返回NodeList类型，本身自带forEach方法，无需额外转换：

// 替换原获取元素的代码
let slides = document.querySelectorAll(".mySlides");

// 直接调用forEach
slides.forEach((c) => {
  c.style.display = "none";
});

补充说明：HTMLCollection是动态集合，DOM结构变化时会自动更新；NodeList多数情况下是静态集合，若幻灯片不会动态增减，用querySelectorAll更省心。

内容的提问来源于stack exchange，提问作者Karlton