Javascript隐藏显示getElementById vs getElementByClassName

我有一个非常简单的工作函数，可以通过单击链接来显示div：

function show() {
document.getElementById('box').style.display="block";
}

<a href="javascript:show();">Show</a>
<div id="box" style="display:none;">
Lorem Ipsum
</div>

函数显示（）{
document.getElementById（'box'）.style.display=“block”；
}
乱数假文

但是现在，当我简单地将div从一个id更改为一个类并将getElementById替换为getElementByClassName时，它就不再起作用了：

function show() {
document.getElementByClassName('box').style.display="block";
}

<a href="javascript:show();">Show</a>
<div class="box" style="display:none;">
Lorem Ipsum
</div>

函数显示（）{
document.getElementByClassName（'box'）.style.display=“block”；
}
乱数假文

我做错了什么？

试试这个：

function show() {
for(var i=0;i<document.getElementsByClassName('box').length;i++){
document.getElementsByClassName('box')[i].style.display="block";
}
}

函数显示（）{
对于（var i=0；itry

对于该类的第一个元素

检查它是否为

var classInstances = document.getElementsByClassName("box");
var n;
for (n = 0; n < classInstances.length; n++) {
   classInstances[n].style.display="block";
}

var classInstances=document.getElementsByClassName（“box”）；
var n；
对于（n=0；n

所以你忘记了s，如果你仔细想想，这是纯逻辑的

一个id是一个唯一的标识号。一个类相反是不唯一的，它们可以有更多。因此，逻辑上，你必须找到它们并迭代它们以获得正确的一个。
这是脚本原则上应该是这样的：

function show() {
    var boxes = document.getElementsByClassName('box');
    for (var i=0; i<boxes.length; i++) {
        boxes[i].style.display = 'block';
    }
}

.

IE8支持
getElementById
，正如
getElementsByTagName
，仅供参考。
你只需用
getElementsByClassName
替换
getElementsByClassName
getElementsByClassName或getElementsByClassName就可以了。我发布的原因与其他人发布的原因相同。我的是d已投票。其他人未投票。删除我的answer@user3168736：如果我没有弄错的话，您是从“没有
getElementByClass
方法。您必须使用
getElementsByClass
”开始的是的，我的答案仍然是present@user3168736然后你复制粘贴了一个错误的答案，并将其添加到你的答案中。然后你看到它是错误的，你再次复制粘贴了其他人的答案，这次是正确的答案。不，他也需要遍历返回的数组。否则它仍然不起作用。你的正确答案，可能是你应该发布如何迭代返回的数组，让他接受指导。谢谢提醒。我没有注意到，实际上是我投了你一票。你太好了。谢谢。@rainerbrunotte:不客气。但是看看编辑过的版本，看看IE8中的功能。我试过了，但发现我得到了用var替换int的结果它在工作。
function show() {
    var boxes = document.getElementsByClassName('box');
    for (var i=0; i<boxes.length; i++) {
        boxes[i].style.display = 'block';
    }
}

function show() {
    var boxes = document.querySelectorAll('.box');   // mind the dot
    for (var i=0; i<boxes.length; i++) {
        boxes[i].style.display = 'block';
    }
}