# 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:

```js
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:

```html
<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.

```js
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.

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

```js
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:

```html
<p>Erster Absatz</p>
<p>Zweiter Absatz</p>
```

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

console.log(absatz);
```

Das Ergebnis ist:

```html
<p>Erster Absatz</p>
```

---

## Auswahl über eine CSS-Klasse

Klassen beginnen in CSS und JavaScript mit einem Punkt `.`.

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

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

console.log(wichtigeInfo);
```

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

Ein Element darf mehrere Klassen besitzen:

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

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

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

Oder du verlangst, dass **beide** Klassen vorhanden sind:

```js
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 `#`.

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

```js
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.

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

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

---

## Auswahl genauer beschreiben

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

### Element mit einer bestimmten Klasse

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

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

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

### Ein Element innerhalb eines anderen Elements

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

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

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

### Ein bestimmtes Eingabefeld

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

```js
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.

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

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

console.log(titel.textContent);
```

Die Konsole zeigt:

```text
Hallo!
```

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

```js
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.

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

```js
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`.

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

console.log(nichtVorhanden);
```

Ausgabe:

```text
null
```

Das bedeutet: JavaScript hat kein passendes Element gefunden.

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

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

nichtVorhanden.textContent = "Hallo";
```

Typischerweise erscheint dann in der Konsole eine Fehlermeldung wie:

```text
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.

```html
<!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:

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

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

```html
<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**.

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

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

console.log(ersteAufgabe.textContent);
```

Ausgabe:

```text
HTML lernen
```

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

```js
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:

```js
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.

```html
<!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>
```

```js
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:

```js
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.