如何在JavaScript函数中使用getElementsByClassName？

Question

我不知道如何在JavaScript中使用多个ID。单个ID和getElementById没问题，但是一旦我将ID更改为class并尝试使用getElementsByClassName，该函数就会停止工作。我已经读了约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>

Answer 1

getElementsByClassName()返回*。您正在尝试直接对结果进行操作；您需要遍历结果。 nodeList
HTMLCollection

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

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

• 更新以反映界面的变化