Was ist der Unterschied zwischen Attributen und Eigenschaften in HTML-Tags?

Attribute sind Paare aus Name-Wert, die direkt im öffnenden HTML-Tag geschrieben werden. Sie bestimmen die Anfangs- oder aktuellen Eigenschaften des Elements, spiegeln aber nicht immer direkt seinen aktuellen Zustand im DOM wider.

Eigenschaften sind Werte, die mit JavaScript-Objekten verbunden sind, die DOM-Elemente repräsentieren. Sie sind dynamisch und spiegeln den aktuellen Zustand des Elements wider.

Hier sind die wichtigsten Unterschiede:

• Ort: Attribute befinden sich im HTML, Eigenschaften in den DOM-Objekten.
• Datentypen: Attribute sind immer Strings. Eigenschaften können verschiedene Datentypen haben (Strings, Zahlen, Booleans, Objekte).
• Dynamik: Attribute sind nach dem Laden der Seite statisch (obwohl sie durch JavaScript geändert werden können). Eigenschaften können sich dynamisch ändern, z.B. durch Benutzerinteraktion oder Skriptlogik.
• Beziehung: Viele Attribute haben direkte Entsprechungen zu Eigenschaften (z.B. das id-Attribut und die id-Eigenschaft). Es gibt jedoch Attribute ohne direkte Eigenschaften (data-*) und Eigenschaften ohne direkte Attribute (textContent, className).

Beispiel:

<input type="text" value="Anfangswert" readonly>

Hier:

• type="text", value="Anfangswert" und readonly sind Attribute.

Nach dem Laden der Seite sind die entsprechenden Eigenschaften in JavaScript:

// Element input holen
const inputElement = document.querySelector('input');

// Eigenschaften des Elements
console.log(inputElement.type);     // Gibt "text" aus (Eigenschaft entspricht Attribut)
console.log(inputElement.value);    // Gibt "Anfangswert" aus (entspricht initial dem Attribut)
console.log(inputElement.readOnly); // Gibt true aus (Eigenschaft entspricht Attribut, aber in camelCase)

Wenn der Benutzer den Text im Eingabefeld ändert, wird die Eigenschaft value aktualisiert, das Attribut value im HTML bleibt jedoch gleich und spiegelt nur den Anfangswert wider.

// Benutzer hat "Neuer Wert" eingegeben
// inputElement.value ist jetzt "Neuer Wert",
// aber inputElement.getAttribute('value') gibt immer noch "Anfangswert" zurück.