为什么我的滚动功能与id而不是类工作?

Question

当向下滚动10px时，我试图添加(不替换)一个类到多个元素。我需要在某些HTML中设置多个id无法更改． 这些元素确实共享一些类，所以我想我可以只针对其中一个。

当我使用getElementById时，它运行得很好，并将一个类添加到单个ID。如果我使用getElementsbyClassName或querySelectorAll来瞄准一个类，它将不起作用。

这个有效:

tabs = document.getElementById("intro");
scrollFunc = function() {
var y = window.scrollY;
if (y >= 10) {
tabs.classList.add("scrollNav");
}
else {
tabs.classList.remove("scrollNav");
}
};
window.addEventListener("scroll", scrollFunc);

这个没有:

tabs = document.getElementsByClassName("navTabs");
scrollFunc = function() {
var y = window.scrollY;
if (y >= 10) {
tabs.classList.add("scrollNav");
}
else {
tabs.classList.remove("scrollNav");
}
};
window.addEventListener("scroll", scrollFunc);

Answer 1

必须遍历getElementsByClassName返回的集合中的每个元素。

试题:

tabs = document.getElementsByClassName("navTabs");
scrollFunc = function() {
var y = window.scrollY;
if (y >= 10) {
[...tabs].forEach((tab) => {
tab.classList.add("scrollNav");
});
}
else {
[...tabs].forEach((tab) => {
tab.classList.remove("scrollNav");
});
}
};
window.addEventListener("scroll", scrollFunc);

根据MDN, getElementsByClassName返回一个"HTML集合"。https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection它本身没有forEach方法。你可以使用扩展语法...将集合中的每个项目添加到一个新的数组[]中，该数组有一个forEach方法。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Answer 2

document.getElementsByClassName返回一个HTMLCollection。classList属性只存在于单个元素上。另一方面，getElementById返回一个元素

要更改集合中每个元素的类列表，需要将其转换为数组，然后循环遍历其中的每个元素。见下文:

tabs = [...document.getElementsByClassName("navTabs")];
scrollFunc = function() {
var y = window.scrollY;
if (y >= 10) {
tabs.forEach(tab => tab.classList.add("scrollNav"));
}
else {
tabs.forEach(tab => tab.classList.remove("scrollNav"));
}
};
window.addEventListener("scroll", scrollFunc);

这段代码使用ES6;你可以很容易地把它转换成一个更兼容浏览器的版本。

相关资源:

• HTMLCollection:document.getElementsByClassName("navTabs")
• 单一元素:document.getElementById("intro")
• 传播语法:[...document.getElementsByClassName("navTabs")]
• 箭头功能:tab => tab.classList.add("scrollNav")