Translate to English Translate to Spanish Translate to French Translate to German Translate to Italian Translate to Russian Translate to Chinese Translate to Japanese

Rating: 1.7/5 (56 votos)



ONLINE
1










JV-Utilizndo o querySelector e querySelectorALL

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>