如何迭代 getElementByClassName 返回

我读过几篇关于 GetElementsByClassName 的文章，但我很难理解如何迭代它返回的内容。

我正在编写纯 JavaScript 代码，以便当用户滚动时我的导航栏将采用“固定”位置。但是，当发生此更改时，导航栏列表项需要更改格式，以便它们的角在底部而不是顶部弯曲。我需要迭代 getElementsByClassName 的返回来单独更改每个组成元素，但我的 for 循环不起作用。我是否需要一个 For ... In 循环？

我从其他帖子中学到的：

• getElementsByClassName 确实NOT返回一个数组。它返回一个 HTML 集合。

• 使用 jQuery 可能会更容易（我在构建此网站时正在尝试学习 JavaScript，因此此时我不使用 jQuery 很重要）。

如果删除我试图用来迭代 HTMLcollection 的 for 循环，下面的 JSFiddle 中的代码将会运行。

TLDR：为了在下面的小提琴中迭代 HTMLcollection，我的 for 循环应该是什么样子？

JSFiddle：

https://jsfiddle.net/mcgettrm/e8dabdkn/ https://jsfiddle.net/mcgettrm/e8dabdkn/

Code:

window.addEventListener('scroll', function (evt) {
  var distance_from_top = document.body.scrollTop;
  if (distance_from_top <= 80) {
    document.getElementById("navBar").style.position = "static";
    document.getElementById("navBarList").style.borderBottom = "solid black 4px";
    document.getElementById("navBar").style.borderTop = "initial";
  }


    else if(distance_from_top > 80) {
    document.getElementById("navBar").style.position = "fixed";
    document.getElementById("navBar").style.top = "0px";
    document.getElementById("navBar").style.borderTop = "solid black 4px";
    document.getElementById("navBarList").style.borderBottom = "initial";
    var myCollection = document.getElementsByClassName("navBarLink");
    var collectionLength = myCollection.length;
    document.getElementById("consoleInfo").innerHTML = collectionLength;
    document.getElementById("consoleInfo").innerHTML = myCollection[0];
    for(var i = 0, i <= collectionLength, i++){
        myCollection.item(i).style.borderTopLeftRadius = "initial";
        myCollection.item(i).style.borderTopRightRadius = "initial";
        myCollection.item(i).style.borderBottomLeftRadius = "1em";
        myCollection.item(i).style.borderBottomRightRadius = "1em"; 
        }
    } 

});

关于你实际问的问题......

...这是如何循环遍历集合的：

您有很多选择，其中大部分都在这个答案在“对于类数组对象”下 https://stackoverflow.com/a/9329476/157247.

简而言之，一些选择，假设我们从以下开始：

var myCollection = document.getElementsByClassName("navBarLink");

forEach:

// forEach:
Array.prototype.forEach.call(myCollection, function(element) {
    // Use element here
});

for loop:

var i;
for (i = 0; i < myCollection.length; ++i) {
    // Use myCollection[i] here
}

请注意，这是0通过< myCollection.length, not <= myCollection.length.

或者使用获取一个真正的数组Array.from or Array.prototype.slice。链接答案中的详细信息。

关于你实际上在做什么......

I would strongly建议您不要做大量的内联样式。相反，您的 JavaScript 可以如此简单：

window.addEventListener('scroll', function (evt) {
  var distance_from_top = document.body.scrollTop;
  document.body.classList.toggle("near-top",     distance_from_top <= 80);
  document.body.classList.toggle("not-near-top", distance_from_top > 80);
});

（如果您必须支持非常旧的浏览器，您将需要一个classList垫片或只是操纵body.className直接地。）

然后，在 CSS 中完成其余部分，例如#navBar stuff:

body.not-near-top #navBar {
    /* styles for when we're not near the top */
}
body.near-top #navBar {
    /* style for when we are near the top */
}

从技术上讲，如果您愿意，您可以取消其中一个类，只需基于样式body #navBar { ... }然后在您保留的课程中覆盖。