DOM-Elemente in JavaScript abrufen

Jetzt lernen wir, wie man DOM-Elemente einer Seite abruft, um später Manipulationen an ihnen vorzunehmen.

Nehmen wir an, wir haben einen Button:

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

Lassen wir uns einen Verweis auf diesen Button in einer Variable speichern. Dazu sollte die Methode querySelector des speziellen Objekts document verwendet werden. Diese Methode nimmt einen CSS-Selektor als Parameter entgegen und gibt einen Verweis auf das gefundene Element zurück.

Unser Button hat das Attribut id mit dem Wert button. Daher können wir diesen Button mit dem Selektor #button finden. So, lassen wir uns unseren Button suchen und den Verweis darauf in einer Variable speichern:

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

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