DOM elemek lekérése JavaScriptben

Most megtanuljuk, hogyan kérhetjük le az oldal DOM elemeit, hogy később valamilyen manipulációt hajthassunk végre velük.

Tegyük fel, hogy van egy gombunk:

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

Helyezzük el a gombra mutató hivatkozást egy változóba. Ehhez a speciális document objektum querySelector metódusát kell használnunk. Ez a metódus egy CSS szelektort fogad paraméterként, és visszaad egy hivatkozást a szelektor által megtalált elemre.

A gombunknak van egy id attribútuma button értékkel. Ez azt jelenti, hogy megtalálhatjuk ezt a gombot a #button szelektorral. Nos, keressük meg a gombunkat és mentsük el a rá mutató hivatkozást egy változóba:

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

Adott 3 bekezdés:

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

Mentsen el egy hivatkozást minden egyes bekezdésre egy külön változóba, és írja ki mindegyik változó tartalmát a konzolra.