Javascript 收集div并对其执行CSS：HTMLCollection vs Array

想知道我如何才能使其正常工作：

var ArrayTest = [1,2,3,4,"test"];
var ArrayTest2 = document.getElementsByClassName('mydiv');
ArrayTest2.forEach( function(){
    this.style.display = 'none'; 
});

因此，ArrayTest返回为

数组

，但ArrayTest2返回为

HTMLCollection

，并且

forEach

抛出一个“未定义”类型错误

---

如何收集具有相同类名的元素数组，然后对每个元素执行相同的CSS

我会用一种稍微不同的方法来实现这一点，添加一个CSS类，或者使用jQuery使您的生活更轻松：

$(".mydiv").addClass("no-display");

然后在你的CSS中

.no-display {
    display: none;
}

如果要指定特定的内联属性，则可以使用：

$(".mydiv").css("display", "none");

编辑

好的，对于纯JavaScript方法来说

for (var i = 0; i < ArrayTest2.length; i++) {
   ArrayTest2[i].style.display = "none"; 
}

for（变量i=0；i

通过调用

array.prototype.slice

示例

var ArrayTest2 = document.getElementsByClassName('mydiv');

ArrayTest2 = Array.prototype.slice.call(ArrayTest2);

ArrayTest2.forEach( function(element){
    element.style.display = 'none'; 
});

解释

调用

Array#slice

将集合转换为数组，允许您访问

Array#forEach

通过该访问，您可以循环遍历每个元素，并轻松设置显示样式

---

示例#2

使用类似的方法，您可以调用

Array.prototype.forEach

并完全绕过切片部分

Array.prototype.forEach.call(document.getElementsByClassName('mydiv'), function(element) {
    element.style.display = 'none';
});

---

您可以使用ES6 spread操作符将类似数组的对象转换为实际数组。它干净多了。（只需使用Babel或其他编译器）

请不要使用jQuery，我知道它更简单，不会问我是否想使用它。寻找纯JS解决方案。@RenaissanceProgrammer:你没有提到纯JavaScript，尽管我知道没有jQuery标记。很难通过网站上的各种知识来判断人们是否知道jQuery是什么。无论如何，我已经添加了一个纯JavaScript解决方案感谢for循环，我尽量不去问这些琐碎的问题，我希望我错过了一些原型函数，比如

forEach

@RenaissanceProgrammer:没问题-我想将来快速澄清一下将有助于得到更快更简洁的答案。我肯定你比这个网站上的绝大多数用户都了解原型功能，这是很难从这个问题中判断的。是的，下次我会尽量说得更清楚一些，谢谢你的夸奖，我想我在某些方面领先，但在其他方面则不然（我应该自己使用for循环，而不是把它放到网上），这就是代码世界，这将是我的下一步，我查看了HTMLCollection上的MDN文档，它没有列出任何原型函数，所以我想我会问，如果for循环是最好的解决方案，那么我会这样做。

let ArrayTest2 = [...document.getElementsByClassName('mydiv')];