DOM-elementin hankkiminen JavaScriptissä

Nyt opimme hakemaan sivun DOM-elementtejä, jotta voimme myöhemmin suorittaa niillä erilaisia manipulointeja.

Oletetaan, että meillä on jokin painike:

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

Haetaan viite tähän painikkeeseen muuttujaan. Tätä varten tulisi käyttää erikoisolion document metodia querySelector. Tämä metodi ottaa parametrina CSS-valitsimen ja palauttaa viittauksen kyseisellä valitsimella löydettyyn elementtiin.

Painikkeellamme on attribuutti id, jonka arvo on button. Tarkoittaen, että voimme löytää tämän painikkeen valitsimella #button. Joten, etsitään painikkeemme ja tallennetaan viite siihen muuttujaan:

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

Annettu 3 kappaletta:

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

Tallenna viite jokaiseen kappaleeseen omaan muuttujaansa ja tulosta jokaisen näiden muuttujien sisältö konsoliin.