DOM-elementen verkrijgen in JavaScript
Nu leren we hoe we DOM-elementen van de pagina kunnen verkrijgen, om er later manipulaties op uit te voeren.
Stel we hebben een bepaalde knop:
<input id="button" type="submit">
Laten we een referentie naar deze knop in een variabele zetten.
Hiervoor moeten we de methode querySelector
van het speciale object document gebruiken. Deze
methode accepteert een CSS-selector als parameter en
retourneert een referentie naar het element
dat met deze selector is gevonden.
Onze knop heeft een attribuut id met
de waarde button. Dit betekent dat we
deze knop kunnen vinden met de selector #button.
Laten we dus onze knop vinden en de
referentie ernaar in een variabele opslaan:
let button = document.querySelector('#button');
console.log(button);
Er zijn 3 alinea's gegeven:
<p id="elem1">1</p>
<p id="elem2">2</p>
<p id="elem3">3</p>
Sla de referentie naar elke alinea in een aparte variabele op en geef de inhoud van elk van deze variabelen weer in de console.
