Zugriff auf die Elemente

Um in JavaScript ein (oder mehrere) Element(e) gezielt anzusprechen, sucht man im DOM-Baum danach. Dabei benutzt man die schon öfter erwähnte Punktnotation. Da der oberste Knoten im DOM das Objekt document ist, beginnt man meist mit diesem Objekt.

document hat mehrere Methoden, mit denen Elemente ausgewählt werden können. Genauer gesagt, wird mit diesen Methoden eine Referenz auf das Element zurückgegeben.

Eine wichtige und sehr vielseitige ist querySelector():

• wählt immer genau 1 Element aus. Wenn mehrere gefunden werden, wird das erste ausgewählt.
• in der Klammer () können CSS-Selektoren verwendet werden:
  • querySelector('...') für HTML-Elemente
  • querySelector('#...') für IDs
  • querySelector('. ...') für Klassen

Beispiele:

document.querySelector('h3')          // wählt das erste <h3>-Element aus.
document.querySelector('#info')       // wählt das Element mit der ID 'info' aus.
document.querySelector('.warnung')    // wählt das erste Element mit der Klasse 'warnung' aus.