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:

html<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:

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

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