[Dúvida] querySelector vs getElementBy

Oi, Thaissa.

O getElementBy tem uma performance melhor (ele é aproximadamente 5 vezes mais rápido), mas o querySelector é mais versátil, já que pode selecionar como o css (usar . na class, # no id, colocar a tag...).

Espero ter ajudado. :)

Bom dia Thaissa,

a finalidade de ambos é a mesma, buscar um elemento no HTML, porém existem algumas diferenças:

1. na performance: o método getElementById procura elementos varrendo apenas os "id" em um HTML, enquanto o querySelector precisa varrer todo o documento para encontrar o elemento desejado, sendo assim, é compreensível que getElementById ou getElementByClass irá executar muito mais rápido;
2. na flexibilidade: apesar de ser mais lento, o método querySelector possui uma flexibilidade muito maior que os métodos getElementById e getElementByClass, ao contrário desses, com querySelector podemos buscar por tags, id, classes ou qualquer outro seletor CSS, como um data-attribute ou um pseudo-elemento; e
3. na legibilidade: utilizar o método adequado para determinada busca é importante para a legibilidade do código, portanto, se você está buscando um elemento que possui um ID, é boa prática utilizar getElementById("elemento") ao invés de querySelector("#elemento"), mas seria apenas uma boa prática, a diferença de performance comentada no item 1, não será perceptível para o usuário.

Por fim, vale destacar que ambos os métodos buscam o primeiro elemento do seu documento HTML, caso você queira que retorne todos os elementos com aquele id ou class, precisará utilizar querySelectorAll.