Obtendo um elemento DOM em JavaScript

Agora vamos aprender a obter elementos DOM da página para posteriormente realizar algum tipo de manipulação com eles.

Suponha que temos um botão:

<input id="button" type="submit">

Vamos obter uma referência a este botão em uma variável. Para isso, devemos usar o método querySelector do objeto especial document. Este método recebe um seletor CSS como parâmetro e retorna uma referência ao elemento encontrado por esse seletor.

Nosso botão tem um atributo id com o valor button. Isso significa que podemos encontrar este botão pelo seletor #button. Então, vamos encontrar nosso botão e armazenar a referência a ele em uma variável:

let button = document.querySelector('#button');
console.log(button);

Existem 3 parágrafos:

<p id="elem1">1</p>
<p id="elem2">2</p>
<p id="elem3">3</p>

Armazene a referência a cada um dos parágrafos em uma variável separada e exiba o conteúdo de cada uma dessas variáveis no console.