如何正确遍历HTML Collection？滑块宽度计算代码报错求助

嘿，你的问题根源其实很明显——循环的边界写错啦！咱们一步步来理清楚：

问题出在哪？ #

你写的循环条件是 for (let i = 0; i <= slides.length; i++ )，但HTML Collection的索引是从0开始到length-1的。当i等于slides.length的时候，slides[i]就是undefined，这时候你去设置它的style，自然会抛出错误。

修正方案1：修复for循环边界 #

把循环条件改成i < slides.length，这样就不会越界了：

var calcSlideWidth = function(divId){ 
  let slDiv = document.getElementById(divId); 
  let slides = slDiv.getElementsByClassName('slide'); 
  slDiv.style.width = `${100 * slides.length}%`; // 更推荐单独设置style属性，避免覆盖其他样式
  const slideWidth = 100 / slides.length; 
  for (let i = 0; i < slides.length; i++ ){ 
    slides[i].style.width = `${slideWidth}%`; 
  }
};

另外提一句：直接给style赋值整个字符串虽然能运行，但更推荐单独设置style.width这类具体属性，防止不小心覆盖掉其他已设置的样式。

修正方案2：转成数组后用forEach遍历 #

HTML Collection是类数组对象，没法直接用forEach，但我们可以把它转换成真正的数组，写法更简洁：

var calcSlideWidth = function(divId){ 
  let slDiv = document.getElementById(divId); 
  let slides = Array.from(slDiv.getElementsByClassName('slide')); // 转成数组
  slDiv.style.width = `${100 * slides.length}%`; 
  const slideWidth = 100 / slides.length; 
  slides.forEach(slide => {
    slide.style.width = `${slideWidth}%`;
  });
};

你也可以用扩展运算符[...slDiv.getElementsByClassName('slide')]来转数组，效果完全一致。

修正方案3：用for...of循环（现代浏览器支持） #

如果你不需要兼容太老旧的浏览器，直接用for...of遍历HTML Collection也很方便：

var calcSlideWidth = function(divId){ 
  let slDiv = document.getElementById(divId); 
  let slides = slDiv.getElementsByClassName('slide'); 
  slDiv.style.width = `${100 * slides.length}%`; 
  const slideWidth = 100 / slides.length; 
  for (const slide of slides) {
    slide.style.width = `${slideWidth}%`;
  }
};

这几种方法都能解决你的控制台错误，而且代码更规范易读～

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