Hämta DOM-element i JavaScript

Nu ska vi lära oss hur man hämtar DOM-element på sidan för att sedan kunna utföra några manipulationer med dem.

Låt oss säga att vi har en knapp:

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

Låt oss få en referens till denna knapp i en variabel. För att göra detta bör du använda metoden querySelector i det speciella objektet document. Denna metod tar en CSS-selektor som parameter och returnerar en referens till elementet som hittats av denna selektor.

Vår knapp har ett attribut id med värdet button. Det betyder att vi kan hitta denna knapp med selektorn #button. Så, låt oss hitta vår knapp och spara referensen till den i en variabel:

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

Det finns 3 stycken:

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

Spara en referens till varje stycke i en separat variabel och skriv ut innehållet i varje av dessa variabler till konsolen.