Diferença entre getElementById e querySelector

O getElementById é usado quando você tem um elemento específico, com um ID unico em seu html e você referencia ele em seu JS:

Ex de um campo que você teria em HTML:

<input type='text' id="meuID" class='minhaClasse'>

Como você chamaria usando o getElementById:

const input = document.getElementById('meuID')

Ele retornara o primeiro elemento da arvore do DOM.

Já o querySelector pode ser usado para buscar elementos com base em seletores CSS, você pode buscar tanto classes como ids EX:

const input = document.querySelector('.minhaClasse') const input = document.querySelector('.#meuID')

No caso quando você usa o getElementById você não precisa usar no formato de seletor css usando o '#' antes do ID, apenas o ID.

Já no querySelector você precisa especificar do que se trata, igual como você chamaria em um arquivo CSS, então tudo que é inicia com # você está dizendo que é um ID, e tudo que inicia com um . você esta dizendo que é um seletor CSS.