Das DOM: Elemente ändern: Übungen – Informatik Klasse 9

Dein Fortschritt:

0 / 0 Aufgaben

Übungsaufgaben

Dreißig Übungen in gemischter Reihenfolge — du klickst, ziehst, ordnest, rechnest und knobelst. Jede Übung gibt dir sofort eine Rückmeldung, und zu jeder Aufgabe gibt es zwei gestufte Tipps: Der erste zeigt die Richtung, der zweite den entscheidenden Schritt. Die Chips zeigen das Anforderungsniveau: AFB I heißt wiedergeben und direkt anwenden, AFB II selbst entscheiden und verknüpfen, AFB III begründen, beurteilen oder eine Falle durchschauen. Aufgaben mit dem Chip Mix verbinden Wissen aus früheren Unterkapiteln, bei Trick steckt eine Falle drin. Fährst du über ein unterstrichenes Arbeitswort, siehst du, was es genau von dir verlangt.

Wer passt nicht dazu?

AFB II

Begründe in jeder Gruppe, welche Karte nicht zu den anderen passt — klicke sie an.

In jeder Gruppe passt genau eine Karte nicht zu den anderen. Klicke dieses „Kuckucksei“ an und prüfe dann. Mit der Tastatur: Tab zur Gruppe, ←/→ wandern, Enter wählt.

Welcher Selektor wählt keine id?

Welche Zeile verändert die Seite nicht?

Welcher Aufruf liefert eine Liste?

Jede Gruppe hat ihre Regel: Punkt = Klasse, Raute = id; Lesen verändert nichts; nur querySelectorAll liefert eine Liste.

Suche in jeder Gruppe zuerst die Regel, der drei Karten folgen.

Frage dich: Schreibt die Zeile etwas in die Seite oder liest sie nur?

add, remove oder toggle?

AFB II

Erläutere die drei classList-Methoden: Stelle für jede Kombination ein, ob die Klasse k danach am Element hängt oder nicht.

Setze für jede Zeile die Ausgänge: Klick auf ein Feld schaltet ? → Zustand 1 → Zustand 2 … weiter. Tastatur: Enter/Leertaste schaltet, Pfeiltasten wandern durch die Tabelle.

Methode	Klasse k vorher	Klasse k danach
add	da
add	weg
remove	da
remove	weg
toggle	da
toggle	weg

add setzt die Klasse immer, remove nimmt sie immer weg, und toggle kehrt um: Ist sie da, geht sie weg — fehlt sie, kommt sie dazu.

Eine Methode macht immer dasselbe, unabhängig vom Zustand davor: welche?

toggle ist der Schalter: Es kehrt den Zustand um.

Die richtige Zeile bauen

AFB III

Entscheide für jeden Auftrag, wie die Zeile aufgebaut wird: Stelle Selektor und Eigenschaft ein.

Drehe die Walzen, bis die Kombination zum Auftrag passt, und klicke dann auf „Kombination prüfen“. Klick auf ▲/▼ oder auf die obere/untere Hälfte des Fensters dreht. Mit der Tastatur: Tab zur Walze, ↑/↓ drehen, ←/→ Nachbarwalze, Enter prüft.

getElementById querySelector querySelectorAll

"logo" "#logo" ".hinweis" "li"

.textContent .classList.add .length .style

getElementById nimmt die id ohne Raute, querySelector einen CSS-Selektor mit Punkt für die Klasse. Zum Zählen braucht man die Liste von querySelectorAll und length.

Welche Methode ist vorgegeben? Dann passt nur ein Selektor dazu.

Soll etwas geändert werden, steht eine Eigenschaft oder Methode des Elements dahinter; soll gezählt werden, length.