Getting the DOM element in JavaScript

Now we will learn how to get the page DOM elements in order to perform some manipulations with them in the future.

Let's have some button:

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

Let's get a reference to this button into a variable. To do this, use the querySelector method of the special object document. This method takes a CSS selector as a parameter and returns a reference to the element found with this selector.

Our button has an attribute id with the value button. So we can find this button by the selector #button. So, let's find our button and write a reference to it into a variable:

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

Given 3 paragraphs:

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

Put the reference to each of the paragraphs in a separate variable and print the contents of each of these variables to the console.