La diferencia radica en lo que devuelve cada uno de los métodos:
Por id
document.getElementById("color");
La id, al considerarse que debe ser una clave única, devolvería un solo elemento, el que tenga como atributo id el valor color.
Por clase
document.getElementsByClassName("color");
La clase, al ser una clave que puede darse en múltiples elementos de tu DOM, devuelve una colección de todos los elementos que posean dicha clase. Por ello, para poder referenciar a <div id="color"></div>
deberías hacer:
document.getElementsByClassName("color")[0];
Con esto accederías al primer elemento que salga en el DOM de tu página y que tenga la clase "color". En tu caso, al tener solamente uno estarías referenciándolo correctamente.
EDIT
Añado snipped para mayor claridad y uniendo a mi solución la que propuso @Iñigo Irigoyen Erquicia:
function change(color) {
var elements = document.getElementsByClassName("color");
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor=color;
}
}
.div-1 {
background-color: orange;
width: 50px;
height: 50px;
float: left;
margin: 5px
}
.div-2 {
background-color: black;
width: 50px;
height: 50px;
float: left;
margin: 5px
}
.div-3 {
background-color: green;
width: 50px;
height: 50px;
float: left;
margin: 5px
}
.div-4 {
background-color: red;
width: 50px;
height: 50px;
float: left;
margin: 5px
}
.color {
background-color: transparent;
border: 2px solid #000;
width: 50px;
height: 50px;
float: left;
margin: 5px;
}
<div class="div-1" onclick="change('orange')"></div>
<div class="div-2" onclick="change('black')"></div>
<div class="div-3" onclick="change('green')"></div>
<div class="div-4" onclick="change('red')"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>