¿Cómo se usa getElementsByClassName en javascript-function?

No puedo entender cómo usar múltiples ID en javascript. No hay problema con ID único y getElementById, pero tan pronto como cambie los ID a class y trato de usar getElementsByClassName, la function deja de funcionar. He leído acerca de 100 publicaciones sobre el tema; todavía no he encontrado la respuesta, así que espero que alguien aquí sepa cómo hacer que getElementsByClassName funcione.

Aquí hay un código simple que he usado para probar:

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> 

getElementsByClassName() devuelve un nodeList HTMLCollection *. Está tratando de operar directamente en el resultado; necesita iterar a través de los resultados.

 function change_boxes() { var boxes = document.getElementsByClassName('boxes'), i = boxes.length; while(i--) { boxes[i].style.backgroundColor = "green"; } } 

* actualizado para reflejar el cambio en la interfaz

getElementsByClassName Devuelve un set de elementos que tienen todos los nombres de class dados

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

getElementsByClassName devuelve una list de elementos por lo que necesitaría iterar a través de ellos y establecer los styles en cada elemento uno por uno. También tiene soporte limitado en IE, por lo que es mejor que utilices jQuery:

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