Recentemente comecei a estudar JavaScript por "n" motivos e uma coisa que eu pude perceber, é que uns professores ensinam a mexer na DOM usando o getElementById() e outros usam o querySelector(). De inicio achei normal já que fazem praticamente a mesma coisa, porém não são os mesmos. Sabendo disso, resolvi trazer esse post mostrando algumas informações encontradas.
Qual a função de cada um
querySelector()
Retorna o primeiro elemento dentro do documeto que foi especificado pelo seletor. O querySelector() aceita os atributos ids, classes e outros parametros de seleção.
Exemplo:
<h2 class="exemplo"></h2>
<script>
document.querySelector(".exemplo").innerHTML = "Olá mundo!";
</script>
Olá mundo!
getElementById()
O getElementById retorna o elemento com o id selecionado.
Exemplo:
<h2 class="exemplo"></h2>
<script>
document.getElementById("exemplo").innerHTML = "Como está?";
</script>
Como está?
Como o metódo procura somente ids, não será necessário usar o "#" para especificar que é um id. Diferente do querySelector() que deve sim informar, já que faz uma busca em todo o documento por aquilo que foi especificado.
Benchmarck
Mesmo sendo similares, o querySelector() pode procura em uma DOM, uma id ou classe, diferente do getElementById() que só procura pela id selecionada. Mas será que há uma diferença no quesito velocidade? Pelo visto sim, e é o que o site MeasureThat.net pode mostrar nesse benchmark:
Segundo o benchmark, o método getElementById() tem 922,827.555 execuções por segundo, enquanto o querySelector() tem somente 467,885.649. Olhando pelo gráfico fica visivelmente perceptível qual é o que se sai melhor.
Top comments (0)