Skip to main content

Elemente mit `querySelector()` auswählen

Elemente gezielt auswählen

Damit JavaScript etwas auf einer Webseite verändern kann, muss es zuerst das passende HTML-Element finden. Dafür verwenden wir häufig:

document.querySelector()

querySelector() durchsucht die HTML-Seite und gibt das erste Element zurück, das zu einem CSS-Selektor passt.

Die Schreibweise kennst du vielleicht schon aus CSS: Elemente können über ihren Namen, ihre Klasse oder ihre ID ausgewählt werden.

Ein einfaches HTML-Beispiel

Stell dir vor, deine Webseite enthält diesen Code:

<h1>Willkommen</h1>

<p class="hinweis">Bitte wähle eine Farbe aus.</p>

<button id="start-button">Starten</button>

JavaScript kann nun auf diese Elemente zugreifen.

const ueberschrift = document.querySelector("h1");
const hinweis = document.querySelector(".hinweis");
const startButton = document.querySelector("#start-button");

Die drei Variablen enthalten danach jeweils ein HTML-Element:

  • ueberschrift verweist auf das erste <h1>-Element.
  • hinweis verweist auf das Element mit der Klasse hinweis.
  • startButton verweist auf das Element mit der ID start-button.

Merke: document steht für die gesamte HTML-Seite, die gerade im Browser geöffnet ist.

Auswahl über den Elementnamen

Du kannst ein Element direkt über seinen HTML-Tag auswählen.

<p>Das ist ein Absatz.</p>

const absatz = document.querySelector("p");

console.log(absatz);

In der Browser-Konsole wird das gefundene <p>-Element angezeigt.

Wenn mehrere Absätze vorhanden sind, wird nur der erste gefunden:

<p>Erster Absatz</p>
<p>Zweiter Absatz</p>

const absatz = document.querySelector("p");

console.log(absatz);

Das Ergebnis ist:

<p>Erster Absatz</p>

Auswahl über eine CSS-Klasse

Klassen beginnen in CSS und JavaScript mit einem Punkt ..

<p class="wichtig">Diese Information ist wichtig.</p>

const wichtigeInfo = document.querySelector(".wichtig");

console.log(wichtigeInfo);

Hier bedeutet .wichtig: „Suche ein Element mit der Klasse wichtig.“

Ein Element darf mehrere Klassen besitzen:

<p class="hinweis wichtig">Bitte beachte die Regeln.</p>

Du kannst es weiterhin über eine einzelne Klasse auswählen:

const text = document.querySelector(".wichtig");

Oder du verlangst, dass beide Klassen vorhanden sind:

const text = document.querySelector(".hinweis.wichtig");

Zwischen .hinweis und .wichtig steht kein Leerzeichen. Das bedeutet: Dasselbe Element muss beide Klassen haben.

Auswahl über eine ID

Eine ID beginnt mit einer Raute #.

<button id="speichern">Speichern</button>

const speichernButton = document.querySelector("#speichern");

IDs sollten auf einer Webseite nur einmal vorkommen. Deshalb eignen sie sich besonders gut für eindeutige Elemente, etwa einen bestimmten Button oder ein Eingabefeld.

<input id="benutzername" type="text">

const eingabeFeld = document.querySelector("#benutzername");

Auswahl genauer beschreiben

CSS-Selektoren können genauer festlegen, welches Element gesucht wird.

Element mit einer bestimmten Klasse

<p class="meldung">Eine Nachricht</p>
<div class="meldung">Ein Bereich</div>

const absatzMeldung = document.querySelector("p.meldung");

Dieser Selektor sucht nur nach einem <p>-Element mit der Klasse meldung.

Ein Element innerhalb eines anderen Elements

<section class="profil">
  <h2>Mein Profil</h2>
  <p>Angemeldet als Lea.</p>
</section>

const profilTitel = document.querySelector(".profil h2");

Das Leerzeichen bedeutet: „Suche ein <h2> innerhalb eines Elements mit der Klasse profil.“

Ein bestimmtes Eingabefeld

<input type="email" id="email">
<input type="password" id="passwort">

const emailFeld = document.querySelector('input[type="email"]');

Solche Attribut-Selektoren sind nützlich, aber für den Einstieg reichen oft Klassen und IDs aus.

Das ausgewählte Element verwenden

Nach der Auswahl kannst du Eigenschaften des Elements lesen oder verändern.

<h1 id="titel">Hallo!</h1>

const titel = document.querySelector("#titel");

console.log(titel.textContent);

Die Konsole zeigt:

Hallo!

textContent enthält den Text eines Elements. Du kannst ihn auch ändern:

titel.textContent = "Willkommen auf meiner Webseite!";

Nach dieser Zeile wird der sichtbare Text der Überschrift auf der Webseite geändert.

Beispiel: Einen Button auswählen

In diesem Beispiel wird ein Button ausgewählt und in der Konsole ausgegeben.

<button class="farbe-button">Farbe ändern</button>

const farbeButton = document.querySelector(".farbe-button");

console.log(farbeButton);

Wichtig ist die Reihenfolge:

  1. Das HTML-Element muss auf der Seite vorhanden sein.
  2. JavaScript sucht das Element mit querySelector().
  3. Die Variable speichert den Verweis auf dieses Element.
  4. Danach kann JavaScript damit arbeiten.

Was passiert, wenn kein Element gefunden wird?

Wenn der Selektor zu keinem Element passt, liefert querySelector() den Wert null.

const nichtVorhanden = document.querySelector(".gibt-es-nicht");

console.log(nichtVorhanden);

Ausgabe:

null

Das bedeutet: JavaScript hat kein passendes Element gefunden.

Wenn du anschließend versuchst, dieses nicht vorhandene Element zu verändern, entsteht ein Fehler:

const nichtVorhanden = document.querySelector(".gibt-es-nicht");

nichtVorhanden.textContent = "Hallo";

Typischerweise erscheint dann in der Konsole eine Fehlermeldung wie:

Cannot set properties of null

Prüfe deshalb bei Fehlern immer:

  • Ist der Klassenname korrekt geschrieben?
  • Fehlt der Punkt . vor einer Klasse?
  • Fehlt die Raute # vor einer ID?
  • Existiert das Element wirklich im HTML?
  • Wird das JavaScript vielleicht ausgeführt, bevor das HTML geladen wurde?

JavaScript erst nach dem HTML laden

Wenn JavaScript zu früh ausgeführt wird, existieren die HTML-Elemente möglicherweise noch nicht. Dann kann querySelector() sie nicht finden.

Eine einfache Lösung: Binde die JavaScript-Datei am Ende des <body> ein.

<!doctype html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Meine Seite</title>
  </head>
  <body>
    <h1 id="titel">Hallo!</h1>

    <script src="script.js"></script>
  </body>
</html>

Wenn script.js geladen wird, wurde die Überschrift bereits vom Browser erstellt. Die Auswahl funktioniert dann:

const titel = document.querySelector("#titel");
titel.textContent = "JavaScript funktioniert!";

Alternativ kannst du das Attribut defer im <head> verwenden:

<script src="script.js" defer></script>

Mit defer wartet der Browser mit der Ausführung von JavaScript, bis das HTML vollständig eingelesen wurde.

querySelector() und querySelectorAll()

querySelector() liefert immer nur das erste passende Element.

<li class="aufgabe">HTML lernen</li>
<li class="aufgabe">JavaScript lernen</li>
<li class="aufgabe">Projekt bauen</li>

const ersteAufgabe = document.querySelector(".aufgabe");

console.log(ersteAufgabe.textContent);

Ausgabe:

HTML lernen

Wenn du alle passenden Elemente benötigst, gibt es document.querySelectorAll():

const alleAufgaben = document.querySelectorAll(".aufgabe");

console.log(alleAufgaben);

Das Ergebnis ist eine Sammlung aller Elemente mit der Klasse aufgabe.

Du kannst mit einem Index auf ein bestimmtes Element zugreifen:

console.log(alleAufgaben[0].textContent);
console.log(alleAufgaben[1].textContent);
console.log(alleAufgaben[2].textContent);

Für viele gleichartige Elemente ist querySelectorAll() später besonders nützlich. Für einzelne Überschriften, Buttons oder Eingabefelder verwendest du meist querySelector().

Häufige Fehler

Fehler Ursache Richtige Schreibweise
document.querySelector("hinweis") Der Punkt für eine Klasse fehlt. document.querySelector(".hinweis")
document.querySelector("start-button") Die Raute für eine ID fehlt. document.querySelector("#start-button")
document.querySelector("#Start-Button") Groß- und Kleinschreibung stimmen nicht überein. document.querySelector("#start-button")
document.querySelector(".button") Die Klasse existiert nicht im HTML. HTML und JavaScript vergleichen
document.querySelector(".karte") Mehrere Karten existieren, aber nur die erste wird gefunden. Bei Bedarf querySelectorAll(".karte") verwenden

Klassen- und ID-Namen müssen exakt übereinstimmen. start-button ist nicht dasselbe wie startButton oder Start-Button.

Vollständiges Mini-Beispiel

Die folgende Seite wählt eine Überschrift, einen Hinweistext und einen Button aus.

<!doctype html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>querySelector üben</title>
  </head>
  <body>
    <h1 id="seiten-titel">Willkommen</h1>

    <p class="hinweis">
      Klicke später auf den Button.
    </p>

    <button id="weiter-button">Weiter</button>

    <script src="script.js"></script>
  </body>
</html>

const titel = document.querySelector("#seiten-titel");
const hinweis = document.querySelector(".hinweis");
const weiterButton = document.querySelector("#weiter-button");

console.log(titel.textContent);
console.log(hinweis.textContent);
console.log(weiterButton.textContent);

In der Konsole erscheinen die Texte der drei gefundenen Elemente.

Merksatz

Mit document.querySelector() findest du das erste HTML-Element, das zu einem CSS-Selektor passt.

Die wichtigsten Selektoren für den Anfang sind:

document.querySelector("p");         // Elementname
document.querySelector(".hinweis");  // Klasse
document.querySelector("#menu");     // ID

Im nächsten Schritt kannst du die gefundenen Elemente verändern: Texte austauschen, CSS-Klassen hinzufügen oder entfernen und auf Klicks reagieren.

Back to top