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: ```

``` ```Saída: Olá mundo! ``` ###getElementById() O getElementById retorna o elemento com o id selecionado. Exemplo: ```

``` ```Saída: 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](https://www.measurethat.net/Benchmarks/Show/2488/0/getelementbyid-vs-queryselector): ![Resultados do benchmarck entre getElementById e querySelector](https://dev-to-uploads.s3.amazonaws.com/i/dl2hh3m0711hbzhtlhc0.png)

Segundo o [benchmark](https://www.measurethat.net/Benchmarks/ShowResult/112439), 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.

| [➕ Telegram](https://t.me/allytiago) | [🌐 Blog](https://blog.allytiago.me/?utm_source=dev.to) | |---------------------------------------|----------------------------------------------------------------------------|

tiagojose

Diferenças entre querySelector() e getElementById()

Join Our Newsletter. No Spam, Only the good stuff.