JS DOM-Selektoren

Selektoren in JavaScript – Cheat Sheet ⚡

Die CSS-Selektoren aus dem ersten Dokument funktionieren 1:1 in JavaScript. Damit findest du Elemente im HTML und kannst sie verändern.

Voraussetzung: Das Script muss laufen, nachdem das HTML geladen ist: <script src="script.js" defer></script>

---

1. Elemente finden

Methode	Liefert	Kein Treffer
document.querySelector(sel)	das erste passende Element	null
document.querySelectorAll(sel)	alle Treffer als NodeList	leere Liste

const titel  = document.querySelector('h1');              // erstes h1
const header = document.querySelector('#top');            // per ID
const karten = document.querySelectorAll('.card');        // alle .card
const links  = document.querySelectorAll('nav > ul a');   // mit Kombinatoren
 
karten.forEach(karte => console.log(karte));              // über alle gehen
console.log(karten.length);                               // Anzahl
console.log(karten[0]);                                   // erstes Element

Innerhalb eines Elements suchen – statt document ein Element verwenden:

const tabelle = document.querySelector('#medals');
const zeilen  = tabelle.querySelectorAll('tr');   // nur Zeilen dieser Tabelle

⚠️ Vor dem Verwenden prüfen, ob etwas gefunden wurde: if (titel) { ... }

---

2. Inhalt ändern: textContent vs. innerHTML

	textContent	innerHTML
liest/schreibt	reinen Text	HTML-Code
<b>Hi</b> wird zu	sichtbarem Text <b>Hi</b>	fettem Hi
sicher bei Benutzereingaben	✅ ja	❌ nein

const p = document.querySelector('p');
p.textContent = 'Hallo <b>Welt</b>';   // zeigt: Hallo <b>Welt</b>
p.innerHTML   = 'Hallo <b>Welt</b>';   // zeigt: Hallo Welt (fett)

🔒 Security-Hinweis (XSS): Gib Benutzereingaben niemals mit innerHTML aus! Eine Eingabe wie <img src="x" onerror="alert('Gehackt')"> würde als Code ausgeführt. Regel: Text von außen → immer textContent. innerHTML nur für eigenen, vertrauenswürdigen Code.

---

3. Attribute ändern

Aktion	Code
lesen	el.getAttribute('href')
setzen	el.setAttribute('href', 'https://…')
entfernen	el.removeAttribute('disabled')
prüfen	el.hasAttribute('target')

Viele Standard-Attribute gibt es auch direkt als Eigenschaft:

link.href = 'https://example.com';
bild.src  = 'logo.png';
bild.alt  = 'Logo';

---

4. data-Attribute

Eigene Daten im HTML speichern – Zugriff über dataset:

HTML	JavaScript
data-team="1AHIT"	el.dataset.team
data-gold="3"	el.dataset.gold
data-user-id="42"	el.dataset.userId ← Bindestrich → camelCase

const zeile = document.querySelector('.team');
console.log(zeile.dataset.team);            // "1AHIT"
const gold = Number(zeile.dataset.gold);    // ⚠️ Werte sind immer Strings!
zeile.dataset.checked = 'true';             // erzeugt data-checked="true"

---

5. CSS-Klassen ändern: classList

Methode	Wirkung
el.classList.add('x')	Klasse hinzufügen
el.classList.remove('x')	Klasse entfernen
el.classList.toggle('x')	an ↔ aus
el.classList.contains('x')	true / false
el.classList.replace('a', 'b')	Klasse tauschen

const box = document.querySelector('.box');
box.classList.add('highlight');
if (box.classList.contains('hidden')) { ... }

---

6. Inline-Styles ändern: style

box.style.color = 'red';
box.style.backgroundColor = '#eee';   // CSS: background-color → JS: backgroundColor
box.style.color = '';                 // Inline-Style wieder entfernen

Das erzeugt style="..." direkt im HTML → Sonderwertung, schlägt jeden Selektor (siehe Cheat Sheet 1).

---

7. classList oder style? → classList!

   JavaScript entscheidet  WANN   →  classList.add('highlight')
   CSS entscheidet         WIE    →  .highlight { ... }

	classList ✅	style ❌
Aussehen definiert in	CSS-Datei	verstreut im JS
Design ändern	nur CSS anpassen	jede JS-Stelle suchen
Mehrere Eigenschaften	1 Zeile	1 Zeile pro Eigenschaft
Rückgängig machen	remove('x')	jede Eigenschaft einzeln leeren
Spezifität	normal überschreibbar	Inline → kaum überschreibbar

Ausnahme: Werte, die erst zur Laufzeit berechnet werden (z. B. Breite eines Fortschrittsbalkens 40%, Mausposition) → hier ist style sinnvoll.

---

Der typische Ablauf

// 1. finden
const zeilen = document.querySelectorAll('#medals .team');
 
// 2. durchgehen & prüfen
zeilen.forEach(zeile => {
  const gold = Number(zeile.dataset.gold);
 
  // 3. verändern
  if (gold === 0) {
    zeile.classList.add('dimmed');
  }
});