javascript getElementsByClassName() 总是不返回？

Question

我想为我的浏览器创建最简单的书签。

 javascript:document.getElementsByClassName('source').style.visibility='visible';

我体内有多个 div.source。默认情况下，它们使用 css 设置为 .source { display:none; } 。

我的控制台告诉我： Uncaught TypeError: Cannot set property 'display' of undefined

当我单击小书签时，所有 .source div 都应该可见。我在这里做错了什么？

原文由 matt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可能需要遍历结果，如下所示：

 var divs = document.getElementsByClassName('source');
for(var i=0; i<divs.length; i++) {
  divs[i].style.display='block'
}

并且正如@ionoy 提到的那样，使用 display 属性。我希望这有帮助。

http://jsfiddle.net/erick/rb7bn/1/

原文由 erickb 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

永远不要迭代实时 HTML 集合。这是非常低效的，因为每次访问活动集合的成员（包括长度）时，浏览器都会遍历整个文档以找到特定元素。看 这里。

这是有效的解决方案：

 let divs = [...document.getElementsByClassName('source')];
divs.forEach(divEl => {
  divEl.style.display='block'
}

使用 [...HTMLcollection] perfix 将 HTMLcollection 转换为数组，然后您可以对它进行迭代。

原文由 lior bakalo 发布，翻译遵循 CC BY-SA 4.0 许可协议