Как использовать getElementsByClassName в javascript-функции?

Я не могу понять, как использовать несколько идентификаторов в javascript. Нет проблем с одиночным идентификатором и getElementById, но как только я меняю идентификаторы на класс и пытаюсь использовать getElementsByClassName, функция перестает работать. Я прочитал около 100 сообщений о теме; все еще havent нашел ответ, поэтому я надеюсь, что кто-то здесь знает, как заставить 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>

Ответ 1

getElementsByClassName() возвращает ~~nodeList~~ HTMLCollection *. Вы пытаетесь напрямую воздействовать на результат; вам нужно выполнить итерацию результатов.

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

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

* обновлен с учетом изменения интерфейса

Ответ 2

getElementsByClassName Возвращает набор элементов, которые имеют все имена классов

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

Ответ 3

getElementsByClassName возвращает список элементов, поэтому вам нужно будет перебирать их и устанавливать стили для каждого элемента по одному. Он также имеет ограниченную поддержку в IE, поэтому вам может быть лучше использовать jQuery:

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