In JavaScript unterscheidet man bei HTML-Elementen meist zwischen Eigenschaften (Properties), Attributen und Styles. Da ein HTML-Element im Browser ein komplexes Objekt ist, gibt es hunderte Möglichkeiten, aber hier sind die, die du im Alltag zu 99 % brauchst:
Das sind die absoluten Basics, um an den Text oder das HTML innerhalb eines Elements zu kommen.
| Eigenschaft | Beschreibung |
|---|---|
| innerText | Der sichtbare Text (berücksichtigt CSS, z. B. display: none). |
| textContent | Der reine Textinhalt (schneller, liest auch versteckten Text). |
| innerHTML | Das komplette HTML inklusive aller Tags innerhalb des Elements. |
| value | Speziell für Formular-Elemente (input, select, textarea). |
Hier geht es darum, wer das Element ist und wie es aussieht.
| Eigenschaft | Beschreibung |
|---|---|
| id | Die eindeutige ID des Elements. |
| className | Der komplette String des class-Attributs. |
| classList | Ein Objekt, um Klassen elegant zu bearbeiten (.add(), .remove(), .toggle(), .contains()). |
| tagName | Der Name des Tags (immer in Großbuchstaben, z. B. "DIV" oder "LI"). |
Zwei gängige Wege, um auf die CSS-Klassen eines Elements zuzugreifen.
Hier sind die zwei wichtigsten Werkzeuge:
Das ist eine Liste aller Klassen des Elements. Sie bietet praktische Methoden wie:
.contains('klasse'): Prüft, ob die Klasse vorhanden ist (gibt true oder false zurück).
.add('klasse') / .remove('klasse'): Fügt Klassen hinzu oder löscht sie.
.toggle('klasse') weist bei jedem Aufruf eine Klasse zu oder löscht sie in abwechselnder Reihenfolge. Beispiel
Dies gibt dir alle Klassen als einen einzigen String (Text) zurück, so wie sie im HTML-Attribut stehen.
Attribute sind das, was im HTML-Tag steht.
| Methode / Eigenschaft | Beschreibung |
|---|---|
| getAttribute("name") | Liest ein beliebiges Attribut aus (z. B. src, href, title). |
| setAttribute("n", "v") | Setzt ein Attribut auf einen neuen Wert. |
| dataset | Zugriff auf alle data-* Attribute. Aus data-user-id wird dataset.userId. |
| hasAttribute("name") | Prüft, ob ein Attribut überhaupt existiert (gibt true/false). |
Oft muss man wissen, wie groß ein Element ist oder wo es auf dem Bildschirm steht.
| Eigenschaft | Beschreibung |
|---|---|
| offsetWidth / offsetHeight | Die volle Breite/Höhe inklusive Border und Padding. |
| clientWidth / clientHeight | Die Breite/Höhe nur mit Padding (ohne Border). |
| getBoundingClientRect() | Extrem wichtig: Liefert top, left, right, bottom, x, y relativ zum sichtbaren Bereich (Viewport). |
Hier gibt es zwei Wege:
element.style.color: Damit kannst du Inline-Styles setzen oder auslesen (also das, was direkt im style-Attribut des Tags steht).
window.getComputedStyle(element): Damit liest du die tatsächlichen CSS-Werte aus, die vom Browser berechnet wurden (egal ob sie aus einer CSS-Datei, einem <style>-Block oder Inline kommen).
Wichtig: getComputedStyle liefert schreibgeschützte Werte (z.B. "16px").
Formular-Elemente (<input>, <select>, <textarea>) sind eine eigene kleine Welt in JavaScript. Sie haben spezielle Eigenschaften, die bei normalen <div> oder <span> Elementen gar nicht existieren.
Hier ist die Ergänzung deiner Liste, speziell für Formulare:
Man kann sich HTML-Elemente wie Eisberge vorstellen: Ein Teil ist die Struktur (Attribute/HTML), der andere Teil ist die Präsentation (CSS).
Hier ist ein kurzer Vergleich, um den Unterschied zwischen Attributen und Styles beim Auslesen zu verdeutlichen:
| Aufgabe | Der "Attribut"-Weg | Der "Style"-Weg |
| Bildquelle | img.src (oder getAttribute('src')) | – |
| Hintergrundfarbe | – | getComputedStyle(el).backgroundColor |
| Link-Ziel | a.href | – |
| Tatsächliche Höhe | el.offsetHeight (Zahl) | getComputedStyle(el).height (String mit "px") |
| Eigenschaft | Gilt für... | Beschreibung |
| value | input, textarea, select | Der aktuelle Inhalt des Feldes. Bei einem Textfeld ist es der Text, bei einem Select die value der gewählten Option. |
| name | Alle Inputs | Der Wert des name-Attributs. Wichtig, wenn du Daten an einen Server sendest. |
| checked | checkbox, radio | Ein Boolean (true oder false). Zeigt an, ob der Haken gesetzt ist. |
| disabled | Alle Inputs | Ein Boolean. Wenn true, ist das Feld ausgegraut und nicht bedienbar. |
| required | Alle Inputs | Ein Boolean. Zeigt an, ob das Feld laut HTML-Validierung ausgefüllt werden muss. |
| placeholder | Text-Inputs | Der graue Hinweistext, der verschwindet, wenn man tippt. |
| type | Alle Inputs | Der Typ (z.B. "password", "email", "number"). Du kannst ihn sogar zur Laufzeit ändern (z.B. Passwort sichtbar machen). |
| multiple | select, file | Zeigt an, ob mehrere Optionen oder Dateien gleichzeitig gewählt werden können. |
Das ist eine klassische Stolperfalle! ⚠️
getAttribute("value"): Gibt dir den Wert zurück, der beim Laden der Seite im HTML stand (der Initialwert).
element.value: Gibt dir den echten, aktuellen Wert zurück, den der Nutzer gerade eingetippt hat.
Regel: Wenn du wissen willst, was der Nutzer gerade gemacht hat, nutze immer die Property (z.B. .value oder .checked), nicht das Attribut.
Stell dir vor, du hast in deiner Shopping-Liste eine Checkbox für "Wichtig":
<input type="checkbox" class="urgent-task" name="urgent">
Um in JavaScript zu prüfen, ob der Nutzer den Haken gesetzt hat, ist der Weg über checked viel einfacher als alles andere:
const checkbox = document.querySelector(".urgent-task");
if (checkbox.checked) {
console.log("Dieser Artikel ist extrem wichtig!");
}
Wenn du ein ganzes Formular mit vielen Feldern hast, musst du nicht jedes value einzeln abfragen. Es gibt ein geniales Objekt namens FormData. Damit kannst du alle name und value Paare eines Formulars auf einen Schlag auslesen.