Boa noite Gabriel Pereira,
O método document.querySelector() pode selecionar tanto tags, identificadores e classes. Para selecionar com ele uma tag, um id ou uma classes fazemos igual no CSS, para tag apenas o nome da tag, para identificadores usamos a cerquilha e o nome do identificador e para as classes o ponto e o nome da classe.
ex:
document.querySelector("div");
document.querySelector("#exemplo");
document.querySelector(".exemplo");
Mas na verdade Gabriel, podemos ir muito além disso, o valor que o método document.querySelector() aceita são os seletores do CSS. Podemos por exemplo selecionar o elemento filho de um elemento, olhe:
document.querySelector("div > p");
document.querySelector("div > p.exemplo");
document.querySelector("div > p#exemplo");
Podemos utilizar qualquer seletor CSS no nosso método para selecionar o elemento.
Agora o método mais utilizado para selecionar classe é o document.querySelectorAll() por que o document.querySelector() retorna o primeiro elemento que corresponde a um (s) seletor (es) CSS especificado (s) no documento.
Se você quer selecionar todas as classes do seu documento use document.querySelectorAll() , se quer apenas selecionar um elemento use document.querySelector().
Espero ter ajudado, abraços!
