MINT lernen

Das DOM: Elemente ändern

Zwei Textaufgaben mit Hinweisen und Erwartungshorizont — eine Anzeigetafel steuern und teure Preise markieren.

Dein Fortschritt:
0 / 0 Aufgaben
1

Die Anzeigetafel

AFB I–II

Für ein Schulturnier gibt es diese Anzeigetafel:

<h1 id="spiel">7a – 7b</h1>
<p id="stand">0 : 0</p>
<p class="info">Halbzeit 1</p>
const stand = document.getElementById("stand");
stand.textContent = "1 : 0";
document.querySelector(".info").textContent = "Halbzeit 2";
stand.style.color = "green";
  1. Beschreibe den DOM-Baum des Ausschnitts (Elternelement: body).
  2. Gib an, was nach dem Programm auf der Tafel zu sehen ist.
  3. Erläutere den Unterschied zwischen getElementById("stand") und querySelector("#stand").

Hinweise

Hinweis zu Aufgabe a)
Alle drei Elemente sind Geschwister.
Hinweis zu Aufgabe b)
Gehe die vier Zeilen nacheinander durch.
Hinweis zu Aufgabe c)
Beide finden dasselbe Element — worin unterscheidet sich die Schreibweise?

Erwartungshorizont

Erwartungshorizont zu Aufgabe a)

body hat drei Kinder: h1#spiel, p#stand, p.info; jedes enthält einen Textknoten.

Erwartungshorizont zu Aufgabe b)

Überschrift „7a – 7b“ (unverändert), darunter „1 : 0“ in grüner Schrift, darunter „Halbzeit 2“.

Erwartungshorizont zu Aufgabe c)

Beide liefern hier dasselbe Element. getElementById sucht nur nach einer id und bekommt den Namen ohne Raute. querySelector nimmt jeden CSS-Selektor (auch Klassen oder ul li) — für eine id also mit Raute.

2

Teure Preise markieren

AFB II–III

In einer Preisliste sollen alle Preise über 10 € rot erscheinen. Jedes Preisfeld hat die Klasse preis:

<li>Heft <span class="preis">2</span> €</li>
<li>Taschenrechner <span class="preis">19</span> €</li>
<li>Zirkel <span class="preis">8</span> €</li>
<li>Atlas <span class="preis">24</span> €</li>
const preise = document.querySelector(".preis");
for (let i = 0; i < preise.length; i++) {
  if (Number(preise[i].textContent) > 10) {
    preise[i].style.color = "red";
  }
}
  1. Ermittle, welche Preise bei einem korrekten Programm rot werden.
  2. Überprüfe das Programm: Warum wird kein einziger Preis rot? Gib die Korrektur an.
  3. Beurteile, ob classList.add("teuer") mit einer CSS-Regel .teuer { color: red; } besser wäre als style.color.

Hinweise

Hinweis zu Aufgabe a)
Vergleiche jede Zahl mit 10.
Hinweis zu Aufgabe b)
Was liefert querySelector — und hat das eine Länge?
Hinweis zu Aufgabe c)
Wo sollte Gestaltung stehen?

Erwartungshorizont

Erwartungshorizont zu Aufgabe a)

19 € (Taschenrechner) und 24 € (Atlas).

Erwartungshorizont zu Aufgabe b)

querySelector liefert nur das erste Element (den Span mit „2“), kein Array. preise.length ist undefined, 0 < undefined ist false — die Schleife läuft nie. Korrektur: querySelectorAll(".preis").

Erwartungshorizont zu Aufgabe c)

Besser: Die Gestaltung bleibt in der CSS-Datei, JavaScript sagt nur „dieses Element ist teuer“. Ändert man später Farbe oder Schrift, reicht eine Änderung im CSS; außerdem lässt sich die Klasse mit classList.remove sauber wieder entfernen. style.color ist für einen schnellen Einzelfall in Ordnung.