Obtención de un elemento DOM en JavaScript

Ahora aprenderemos a obtener los elementos DOM de la página, para posteriormente realizar algún tipo de manipulación con ellos.

Supongamos que tenemos un botón:

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

Obtengamos una referencia a este botón en una variable. Para ello debemos usar el método querySelector del objeto especial document. Este método acepta como parámetro un selector CSS y devuelve una referencia al elemento encontrado con ese selector.

Nuestro botón tiene un atributo id con el valor button. Por lo tanto, podemos encontrar este botón con el selector #button. Así que, encontremos nuestro botón y guardemos la referencia a él en una variable:

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

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