Question

我已经阅读了几篇关于GetElementsByClassName的帖子，但我很难理解如何迭代它返回的内容。

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

我从其他帖子中学到了什么：

getElementsByClassName执行 NOT 返回数组。它返回一个HTMLcollection。
使用jQuery可能会更容易（我正在尝试学习JavaScript，因为我构建了这个站点，所以此时我不使用jQuery非常重要。）

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

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

的jsfiddle：

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

代码：

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"; 
        }
    } 

});

Answer 1

关于你实际要求的内容......

......这是如何遍历集合：

您有很多选项，其中大部分都在this answer under "For Array-Like Objects"中列出。

简单地说，一些选择，假设我们开始：

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

<强> forEach ：

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

for循环：

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

请注意，0到< myCollection.length，不是 <= myCollection.length。

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

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

我会强烈建议你不要做那么大量的内联样式。相反，您的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内容：

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 { ... }设置样式，然后在你保留的课程中覆盖。

Answer 2

要按i ndex访问数组项，您应使用myCollection[i]代替myCollection.item(i)。

此外，您的for循环可以按;而不是,分隔字词。

您已撰写for(var i = 0, ..，应为for(var i = 0; ..

希望它有所帮助。

如何通过getElementByClassName返回迭代

2 个答案:

关于你实际要求的内容......

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