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.