Conheçendo o getElementsByClassName

Se você é desenvolvedor front-end, algum dia já passou pelo problema de ter que pegar diversos elementos pela classe, mas não poder utilizar o jQuery. Bom, isso nunca mais vai ser um problema já que hoje temos o getElementsByClassName. Ele é uma das muitas novidades do HTML5. O javascript foi amplamente melhorado nesses últimos anos.

O getElementsByClassName funciona da mesma maneira que o getElementById, porém retorna um array com os objetos, diferente do outro que ja retornava o objeto.
Se você não sabe o que é um array ou não sabe manipula-lo, aconselho-o a ler esse artigo que eu fiz falando do mesmo Javascript - Arryas

<script>
    window.onload = function(){
var objeto = document.getElementById("element");
alert(objeto.innerHTML)
   }
</script>

<div id="element">Hello!</div>

O ID é um elemento único, então o javascript pode pegar um elemento pelo ID e coloca-lo diretamente num objeto. Classes podem se repetir por todo o documento e em diversos objetos, por isso o getElementsByClassName coloca-os em um array.

<script>
window.onload = function(){

var test = document.getElementsByClassName("elements");
alert(test.length);
for(i = 0; i < test.length; i++){
test[i].innerHTML = "Teste " + i;
}
}
</script>

<div class="elements"></div>
<div class="elements"></div>
<span class="elements"></span>

                                                                             Publicidade