Dúvida sobre a função

Ambas funções querySelector() e getElementById() são métodos do JavaScript que servem para retornarmos dentro do script algum o conteúdo de algum elemento do documento HTML.

No caso do querySelector() ele serve para retornar o PRIMEIRO elemento do documento que corresponda ao seletor CSS passado como parâmetro na função. Um exemplo prático de uso da função seria:

// HTML
<div class="exemplo">Olá Mundo!</div>
<div class="exemplo">Adeus Mundo!</div>

// JavaScript
const elementoTeste = document.querySelector('.exemplo');
console.log(elementoTeste.textContent);
// Output: "Olá Mundo!"

Como você pode observar o output desse código é a primeira ocorrência no documento do seletor de classe 'exemplo' que foi passado como parâmetro da função, ou seja a div que contém: 'Olá Mundo!'. Existe um outro método que ao invés de retornar apenas a primeira ocorrência retorna todos os elementos do parâmetro passado que é o querySelectorAll().

Já o getElementById() funciona de maneira parecida, retornando o primeiro elemento do documento que possua identificador (Id) igual ao que foi passado como parâmetro dentro da função (é boa prática que dentro da sua página HTML que os Id's sejam únicos, não existindo dois elementos com o mesmo Id). Um exemplo de caso seria:

// HTML
<div id="ola">Olá Mundo!</div>
<div id="adeus">Adeus Mundo!</div>

// JavaScript
const elementoTeste = document.getElementById('.exemplo');
console.log(elementoTeste.textContent);
// Output: "Olá Mundo!"

Em resumo, ambos os métodos servem para que possamos dentro do JavaScript acessar e também modificar o conteúdo de elementos do documento HTML. Sendo o querySelector() um método um pouco mais versátil.