如何在javascript函数中使用GetElementsByCassName？

我不知道如何在javascript中使用多个ID。单ID和getElementById没有问题，但只要我将ID更改为class并尝试使用GetElementsByCassName，函数就会停止工作。我读了大约100篇关于这个话题的帖子；仍然没有找到答案，所以我希望这里的人知道如何使getElementsByClassName工作

以下是我用于测试的一些简单代码：

function change(){
    document.getElementById('box_one').style.backgroundColor = "blue";
}

function change_boxes(){
    document.getElementsByClassName ('boxes').style.backgroundColor = "green";
}


<input name="" type="button" onClick="change(document.getElementById('box_one')); change_boxes(document.getElementsByClassName('boxes'))" value="Click" />   

<div id="box_one"></div>
<div class="boxes" ></div>
<div class="boxes" ></div>

函数更改（）{
document.getElementById（'box_one'）.style.backgroundColor=“蓝色”；
}
函数更改_框（）{
document.getElementsByClassName（'box'）.style.backgroundColor=“绿色”；
}

getElementsByClassName（）

返回一个

nodeList

HTMLCollection

*。你试图直接对结果进行操作；您需要遍历结果

function change_boxes() {
    var boxes = document.getElementsByClassName('boxes'),
        i = boxes.length;

    while(i--) {
        boxes[i].style.backgroundColor = "green";
    }
}

---

*更新以反映接口中的更改

GetElementsByCassName返回一组具有所有给定类名的元素

var elements = document.getElementsByClassName('boxes');
for(var i=0, l=elements.length; i<l; i++){
 elements[i].style.backgroundColor = "green";
}

var elements=document.getElementsByClassName（'box'）；
for（var i=0，l=elements.length；igetElementsByClassName）返回一个元素列表，因此您需要逐一遍历它们并设置每个项目的样式。它在IE中的支持也有限，因此最好使用jQuery：

$(".boxes").css("backgroundColor", "green");

顾名思义，该函数返回一个元素列表：。和的可能重复项以及更多项，可在右侧列中找到。更多重复项：，。请在提出新问题之前使用搜索。Thx-工作正常。我不确定我是否真正理解原因-我会将您的解决方案复制到我正在处理的更大项目中，然后继续幸运的是，我可以让它在那里工作well@Kenneth：
getElementsByClassName
返回具有该类名的所有元素，即多个元素。若要更改这些元素的属性，必须遍历元素列表。嗯-还有一个问题我无法解决。我在同一页面上有20个按钮使用相同的样式。按钮是div-类并通过onClick使用Mathletics中的工作代码进行选择。每个按钮实际上由两个按钮组成，单击时通过z索引改变位置，并为每个按钮显示新图片。完美，正是我们需要的。请记住，如果在使用getElementsByClassName的循环中更改类名，则需要向后工作（如上面的示例，i-）。谢谢！它实际上现在返回
HTMLCollection
的实例，而不是
NodeList