Elemente finden

Um etwas auf der Seite zu ändern, muss JavaScript zuerst das Element finden. Die ganze Seite steht in JavaScript als document zur Verfügung, und ihre Methode document.querySelector() findet ein Element für dich. Probieren wir es an dieser Seite aus:

<h1>Meine Katze</h1>
<p id="katzen-name">Mia</p>
<p class="hinweis">Sie schläft gern.</p>

In die Klammern gibst du querySelector() einen Selektor in Anführungszeichen, der sagt, wonach gesucht werden soll:

• "h1" findet ein Element anhand seines Tag-Namens, hier die Hauptüberschrift,
• "#katzen-name" findet das Element mit dem Attribut id="katzen-name" (# steht für id),
• ".hinweis" findet ein Element mit dem Attribut class="hinweis" (der Punkt steht für class).

Eine id ist ein eindeutiger Name: Nur ein Element auf der Seite darf sie haben. Eine class ist der Name einer Gruppe: Mehrere Elemente können sie teilen, zum Beispiel damit sie gleich aussehen. Wenn mehrere Elemente zum Selektor passen, gibt querySelector() das erste zurück. CSS benutzt dieselben Selektoren, um zu sagen, auf welche Elemente ein Stil angewendet wird.

Speichere das Element in einer Variable, damit du damit arbeiten kannst. console.log() gibt ein Element als sein HTML aus:

const ueberschrift = document.querySelector("h1");
console.log(ueberschrift); // Gibt aus: <h1>Meine Katze</h1>

Wir benutzen const, weil die Variable immer dasselbe Element enthalten wird, auch wenn wir den Text des Elements ändern.

Der Text eines Elements steht in seiner Eigenschaft textContent. Du kannst ihn lesen, und du kannst ihn ändern, indem du einen neuen Wert zuweist, was die Seite sofort verändert:

const katzenName = document.querySelector("#katzen-name");
console.log(katzenName.textContent); // Gibt aus: Mia

katzenName.textContent = "Luna";
console.log(katzenName.textContent); // Gibt aus: Luna

Die Seite zeigt jetzt Luna statt Mia an. JavaScript ändert nur die Seite im Browser, nicht die Datei index.html: Wenn die Seite neu geladen wird, beginnt sie wieder bei index.html, und das Skript führt seine Änderungen noch einmal aus.

Achtung: Das # und der Punkt gehören nur in den Selektor. In HTML schreibst du id="katzen-name", in JavaScript "#katzen-name".