JV-Utilizndo o querySelector e querySelectorALL
Depois de apresentar o getElementsByClassName agora vou mostrar dois novos seletores nativos do javascript, o querySelector e querySelectorAll. Se você já utilizou o jQuery (aposto que sim) vai se sentir bem à vontade, isso porque ele segue o mesmo esquema do famoso framework JS. Para buscar elementos pelo ID utilizamos o cerquilho(#) antes do nome do ID e para buscar pela classe utilizamos o ponto(.) antes do nome do mesmo;
Exemplos querySelector:
<script>
window.onload = function(){
var test = document.querySelector("div.elements");
test.innerHTML = "Primeiro";
}
</script>
<div class="elements"></div>
<div class="elements"></div>
<span class="elements"></span>
O querySelector possui semelhança na hora de buscar elementos com o jQuery, porém ele retorna somente um objeto, o primeiro elemento. O querySelectorAll, como o próprio nome diz, busca todos os elementos que tiver no seletor, retornando um array de objetos.
Exemplo querySelectorAll
<script>
window.onload = function(){
var test = document.querySelectorAll("div.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>