什么是遍历HTML集合的正确方法

Question

我正在尝试制作一个滑块，虽然下面的代码可以计算幻灯片的宽度，但它在控制台中引发了错误。 循环遍历这些元素的正确方法是什么？

Java脚本

var calcSlideWidth = function(divId){
    let slDiv = document.getElementById(divId);
    let slides = slDiv.getElementsByClassName('slide');
    slDiv.style = "width:"+ 100*slides.length +"%";
    slideWidth = 100/slides.length;
    for (let i = 0; i <= slides.length; i++ ){
        slides[i].style = " width:"+ slideWidth +"%";
        console.log(i);
    }
}   

window.onload  = function(){
   calcSlideWidth("slider");
}

的HTML

<div class="slider-container">
    <ul id="slider">
        <li class="slide"><span>Slide 1</span></li>
        <li class="slide"><span>Slide 2</span></li>
        <li class="slide"><span>Slide 3</span></li>
    </ul>
</div>

Answer 1

getElementsBy *方法返回HTMLCollections，这可能很难使用。 考虑改用querySelectorAll，它返回一个静态NodeList －与HTMLCollection不同，它可以直接进行迭代，在进行迭代时不会更改，并且更加灵活。

document.querySelectorAll('.slide').forEach(slide => {
  // do stuff with each slide
  slide.style.width = `${slideWidth}%`;
});

for循环无法清楚地表明您的代码意图，因此应尽可能避免使用（最好使用高阶函数，例如.map，.reduce，.filter等）。 另请参阅： http : //qr.ae/RNMEGA和https://gist.github.com/robotlolita/7643014

（通过.forEach您将永远不会出现一个错误的错误）

请注意，NodeList.forEach是一些较旧的浏览器不支持的新方法-如果使用此方法，请确保在分发之前正确地填充。

Answer 2

确定的错误是位置length处的访问

let i = 0; i <= slides.length
              ^

该条件将访问一个不存在的职位，因此您需要使用以下条件：

let i = 0; i < slides.length
             ^

这样，访问将从0到length - 1