MINT lernen

Das DOM: Elemente ändern

Zehn Übungen zum DOM — Elemente finden, Text und Stil ändern und die Falle mit dem ersten Treffer.

Dein Fortschritt:
0 / 0 Aufgaben
1

Übungsaufgaben

Zehn interaktive Übungen zum Klicken, Ziehen und Knobeln — von AFB I bis AFB III. Jede Übung gibt dir sofort Rückmeldung; wenn du nicht weiterkommst, helfen die gestuften Tipps.

A1
Methoden und Eigenschaften
AFB I

Ordne zu, was jeder Ausdruck liefert oder bewirkt.

Klicke links einen Eintrag an und dann rechts den passenden — es entsteht eine Verbindungslinie. Mit der Tastatur: Enter zum Auswählen, ↑/↓ zum Wandern.
Nur querySelectorAll liefert eine Liste — die anderen beiden Such-Methoden höchstens ein Element.
Ansatz: „All“ im Namen verrät die Liste.
Weiter: textContent ist eine Eigenschaft, keine Methode.
A2
Stimmt's? — DOM
AFB I

Gib an, ob die Aussagen stimmen.

5 Aussagen nacheinander. Eine falsche Einschätzung reicht — dann startest du die Serie mit „Neue Runde“ neu.
Aussage 1 von 5

Die Raute gehört nur in CSS-Selektoren — also in querySelector, nicht in getElementById.
Ansatz: Welche Methode nimmt einen CSS-Selektor?
Weiter: CSS-Namen mit Bindestrich werden in JavaScript umgeschrieben.
A3
Listenpunkte zählen
AFB I
<ul>
  <li>Mathe</li><li>Physik</li><li>Chemie</li>
</ul>
<ol>
  <li>Aufstehen</li><li>Frühstück</li>
</ol>

Bestimme den Wert von document.querySelectorAll("li").length.

Rechne selbst und trage das Ergebnis ein — Enter prüft direkt.
Der Selektor li trifft alle Listenpunkte der Seite — in ul und in ol.
Ansatz: Gehören auch die Punkte der zweiten Liste dazu?
Weiter: Zähle alle li-Elemente.
A4
Titel umgestalten
AFB II

Die Überschrift mit id="titel" soll den Text „Neu“ bekommen, rot werden und die Klasse fett erhalten. Ergänze — zwei Wörter bleiben übrig.

Wort anklicken, dann Lücke anklicken (oder umgekehrt) — mit Tab und Enter geht es genauso. Ein Klick auf eine gefüllte Lücke legt das Wort zurück.

const t = document.("titel"); t. = "Neu"; t..color = "red"; t..add("fett");

value gibt es bei Eingabefeldern (nächstes Unterkapitel). querySelectorAll würde eine Liste liefern, der man keinen Text zuweisen kann.
Ansatz: Die id steht ohne Raute — welche Methode passt?
Weiter: Klassen verwaltet man mit classList.
A5
Plus eins — zweimal
AFB II Mix

Im HTML steht <p id="z">5</p>.

const z = document.querySelector("#z");
z.textContent = Number(z.textContent) + 1;
z.textContent = z.textContent + 1;

Ermittle den angezeigten Text.

Löse die Kette Schritt für Schritt: Erst wenn ein Schritt stimmt, wird der nächste freigeschaltet. Enter prüft.
  1. Text nach Zeile 2:
  2. Text nach Zeile 3:
textContent ist immer Text. Zeile 2 wandelt vorher um und rechnet 5 + 1. Zeile 3 hängt an den Text „6“ eine 1 an → „61“.
Ansatz: Welchen Typ hat textContent?
Weiter: In Zeile 3 fehlt Number(…).
A6
Alle Punkte markieren
AFB II

Jeder Listenpunkt soll die Klasse markiert bekommen, danach wird die Anzahl ausgegeben. Stelle das Programm in der richtigen Reihenfolge dar.

Ziehe die Karten in die richtige Reihenfolge — mit der Tastatur: ↑/↓ verschiebt, Shift+↑/↓ wechselt nur den Fokus.
1const punkte = document.querySelectorAll("li");
2for (let i = 0; i < punkte.length; i++) {
3 punkte[i].classList.add("markiert");
4}
5console.log(punkte.length + " markiert");
Eine Liste aus querySelectorAll durchläuft man wie ein Array: punkte[i] ist ein einzelnes Element.
Ansatz: Erst holen, dann durchlaufen, dann ausgeben.
Weiter: Die Ausgabe gehört hinter die Schleife.
A7
Fehlersuche: Startseite
AFB II

Analysiere das Programm — drei Zeilen sind falsch.

Klicke genau die fehlerhaften Zeilen an — die richtigen musst du stehen lassen.
Mit Raute findet getElementById nichts und liefert null — schon Zeile 2 bricht dann mit TypeError ab.
Ansatz: Vergleiche die Schreibweise mit der Erklärung.
Weiter: Was liefert querySelectorAll?
A8
textContent oder innerHTML?
AFB III

Beurteile die Aussagen über el.textContent = "<b>Hi</b>" und el.innerHTML = "<b>Hi</b>".

Mehrere Antworten sind richtig. Markiere alle zutreffenden und klicke dann auf „Prüfen“.
Das DOM ändert nur die geladene Seite im Browser, nie die Datei. Über innerHTML könnte fremder Code in die Seite gelangen — für reinen Text ist textContent sicherer.
Ansatz: Was passiert mit Tags bei textContent?
Weiter: Wird beim Neuladen der alte Zustand wiederhergestellt?
A9
Einträge zählen
AFB III

Das Programm soll einen Listenpunkt ergänzen und dann „Einträge: 4“ anzeigen. Überprüfe es und korrigiere die fehlerhaften Zeilen.

Klicke die fehlerhaften Zeilen an — dann klappt ein Feld auf, in das du die richtige Zeile schreibst. Geprüft werden Auswahl und Korrekturen (Leerzeichen sind egal).
Tippfehler bei length liefern undefined ohne Fehlermeldung. Zum Verketten fehlt in Zeile 4 das + — das ist ein Syntaxfehler.
Ansatz: Buchstabiere length.
Weiter: Text und Variable werden mit + verbunden.
A10
Wer zeigt Z?
AFB III Trick
<p class="x">A</p>
<p class="x">B</p>
<p>C</p>
document.querySelector(".x").textContent = "Z";
document.querySelector("p").textContent = "Y";

Bestimme, wie viele Absätze am Ende „Z“ zeigen.

Rechne selbst und trage das Ergebnis ein — Enter prüft direkt.
Beide Aufrufe treffen denselben ersten Absatz: Erst wird „A“ zu „Z“, dann dasselbe Element zu „Y“. „B“ und „C“ bleiben unverändert.
Ansatz: querySelector liefert immer nur den ersten Treffer.
Weiter: Welcher Absatz ist der erste p — und der erste mit Klasse x?