DEV Community 👩‍💻👨‍💻

Cover image for Diferenças entre querySelector() e getElementById()
AllyTiago
AllyTiago

Posted on • Updated on • Originally published at blog.allytiago.me

Diferenças entre querySelector() e getElementById()

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>
Enter fullscreen mode Exit fullscreen mode
Olá mundo!
Enter fullscreen mode Exit fullscreen mode

getElementById()

O getElementById retorna o elemento com o id selecionado.

Exemplo:

<h2 class="exemplo"></h2>
<script>
    document.getElementById("exemplo").innerHTML = "Como está?";
</script>
Enter fullscreen mode Exit fullscreen mode
Como está?
Enter fullscreen mode Exit fullscreen mode

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:

Resultados do benchmarck entre getElementById e querySelector

Fonte: MeasureThat.net

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)

Regex for lazy developers

regex for lazy devs

You know who you are. Sorry for the callout 😆