Document.getElementById

Imagine que você tenha uma página HTML com o seguinte trecho de código:

<div>
    <h1 id="titulo-principal">Boas vindas ao meu site</h1>
    <p class="texto-centralizado">Conheça mais detalhes navegando pela página...</p>
</div>

Agora, no código JavaScript, você precisa alterar o texto do título da página e também do parágrafo. Como recuperar esses elementos no código JavaScript?

No Javascript, basicamente, existem duas formas de se recuperar um elemento, sendo uma delas via função document.getElementById():

let titulo = document.getElementById('titulo-principal');

titulo.textContent = 'Novo título alterado';

Repare no código anterior que foi possível recuperar o elemento <h1> da página passando seu id como parâmetro para a função getElementById. O getElementById recupera elementos pelo id da tag na página HTML.

Agora, como fazer para recueprar e alterar o texto do elemento <p>?

let paragrafo = document.getElementById('QUAL ID PASSAR AQUI?');

paragrafo.textContent = 'Novo texto alterado do paragrafo';

Temos um problema, pois a tag p na página html não tem id definido. Com isso, não conseguimos recupear o elemento no código JavaScript. Uma solução seria alterar o código da página HTML e adicionar um id na tag <p>. Porém, isso na verdade nem é necessário, pois existe outra forma de recuperar elementos com JavaScript, utilizando uma outra função chamada document.querySelector():

let paragrafo = document.querySelector('p');

paragrafo.textContent = 'Novo texto alterado do paragrafo';

Repare que, diferente da função getElementById, a função querySelector consegue recuperar um elemento da página de várias maneiras. No código anterior, foi recuperado passando como parâmetro o nome da tag na página HTML. Poderia ser recuperado também passando o id, caso a tag tivesse um id definido na página:

let paragrafo = document.querySelector('#id-do-elemento-aqui');

paragrafo.textContent = 'Novo texto alterado do paragrafo';

O símbolo # (jogo da velha) serve para dizer que é para buscar pelo id da tag na página HTML. Outra opção é recuperar pelo nome da classe:

let paragrafo = document.querySelector('.texto-centralizado');

paragrafo.textContent = 'Novo texto alterado do paragrafo';

O símbolo . (ponto) serve para dizer que é para buscar pelo nome da classe da tag na página HTML.

Resumindo, a função getElementById consegue recuperar um elemento da página apenas pelo ID. Já a função querySelector é muito mais flexível, pois consegue recuperar elementos pelo nome da tag, nome da classe e também pelo id.

O mais comum é utilizar o querySelector, mas às vezes você encontrará códigos que utilizam o getElementById.

Bons estudos!