Grundlegende Selektoren
| document.getElementById() | Element über ID finden |
| document.querySelector() | Erstes passendes Element mit CSS-Selektor finden |
| document.querySelectorAll() | Alle passenden Elemente als NodeList erhalten |
Element-Manipulation
| createElement() | Neues Element erstellen |
| appendChild() | Element als letztes Kind einfügen |
| insertBefore() | Element vor einem anderen einfügen |
| removeChild() | Element entfernen |
| replaceChild() | Element ersetzen |
| cloneNode() | Element klonen |
Inhalt und Attribute verändern
| .textContent | Textinhalt setzen/lesen |
| .innerHTML | HTML-Inhalt setzen/lesen (vorsichtig verwenden) |
| .setAttribute() | Attribut setzen |
| .getAttribute() | Attributwert abrufen |
| .removeAttribute() | Attribut entfernen |
| .dataset | Data-Attribute verwalten |
Klassen und Styles
| .classList.add() | Klasse hinzufügen |
| .classList.remove() | Klasse entfernen |
| .classList.toggle() | Klasse umschalten |
| .classList.contains() | Prüfen, ob Klasse vorhanden |
| .style | Inline-Styles direkt setzen |
Was üben?
- Effizientes DOM-Traversing: Navigiere effizient durch die DOM-Struktur
- Event-Delegation: Events auf übergeordnete Elemente delegieren
- Performante Batch-Updates: DOM-Änderungen gruppieren
- DocumentFragment: Nutzen für bessere Performance
- Vermeiden von Reflows/Repaints: DOM-Operationen optimieren
Gute Übungsprojekte
- Tabs und Accordions
- Bildergalerie mit Lightbox und Slider
- Formulare mit internen Bedingungen