收集 div 并对它们执行 CSS：HTMLCollection vs Array答案

【问题标题】：Gather divs and perform CSS on them: HTMLCollection vs Array收集 div 并对它们执行 CSS：HTMLCollection vs Array
【发布时间】：2014-07-08 18:47:36
【问题描述】：

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

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

所以 ArrayTest 以 Array 的形式返回，但 ArrayTest2 以 HTMLCollection 的形式返回，forEach 引发“未定义”类型错误。

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

【问题讨论】：

那将是我的下一步，我查看了 HTMLCollection 上的 MDN 文档，它没有列出任何原型函数，所以我想我会问，如果 for-loop 是最好的解决方案，那么我会这样做。

标签： javascript html css arrays

【解决方案1】：

我会以稍微不同的方式来做这件事，通过添加一个 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"; 
}

【讨论】：

请不要使用 jQuery，我知道它更容易，不会问我是否想使用它。寻找纯 JS 解决方案。
@RenaissanceProgrammer：虽然我很欣赏没有 jQuery 标签，但您没有提到纯 JavaScript。通过网站上的各种知识，很难判断人们是否知道 jQuery 是什么。无论如何，我添加了一个纯 JavaScript 解决方案
感谢 for-loop，我尽量不要问这些琐碎的问题，希望我错过了一些像 forEach 这样的原型函数。
@RenaissanceProgrammer：没问题 - 我想未来的快速澄清将有助于获得更快更简洁的答案。我确信您比该网站上的绝大多数用户都领先于原型功能 - 从这个问题很难衡量。
是的，下次我会尝试更明确一些，感谢您的称赞，我想我在某些方面领先，但在其他方面却没有（应该只是自己使用 for-loop而不是把它带到网上），这就是代码的世界XD

【解决方案2】：

您可以通过调用Array.prototype.slice 将 HTMLCollection 转换为数组

示例

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';
});

【讨论】：

【解决方案3】：

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

您可以使用 ES6 扩展运算符将类似数组的对象转换为实际数组。干净多了。（只是你需要使用 Babel 或其他一些编译器）。

【讨论】：