.prop() vs .attr() in jQuery: Schritt-für-Schritt-Analyse mit Beispielen

Einleitung: Warum ist dieses Thema so wichtig?

Wenn Sie jemals jQuery-Code geschrieben haben, der den Wert eines Attributs eines HTML-Elements abrufen oder setzen sollte, sind Sie bestimmt auf zwei Methoden gestoßen: .prop() und .attr(). Auf den ersten Blick tun sie dasselbe. In der Praxis ist der Unterschied zwischen ihnen jedoch die Quelle von Hunderten von Fehlern und Tausenden von Fragen auf Stack Overflow.

In diesem Schritt-für-Schritt-Tutorial werden wir ein für alle Mal klären, wie sich .prop() und .attr() in jQuery unterscheiden, wann man welche verwendet und wie man nicht in die Falle tappt. Wir werden Live-Code schreiben, das tatsächliche Verhalten des Browsers betrachten und uns eine einfache Regel merken.

Dieser Artikel ist keine trockene Dokumentation. Es ist Ihr persönlicher Leitfaden zu einem der verwirrendsten Themen in jQuery.

Kurz gefasst: Attribute vs. Eigenschaften

Bevor wir in den Code eintauchen, lassen Sie uns die Theorie klären. Im DOM (Document Object Model) gibt es zwei Konzepte:

\n
• Attribut (attribute) – das, was im HTML-Code geschrieben steht. Zum Beispiel <input type="checkbox" checked="checked">. Attribute sind immer Zeichenketten.
\n
• Eigenschaft (property) – das, was im DOM-Element-Objekt gespeichert wird, nachdem der Browser das HTML gelesen hat. Eigenschaften können beliebige Datentypen sein: Zeichenkette, Boolean, Zahl, Objekt.
\n

Die Methode .attr() arbeitet mit Attributen. Die Methode .prop() arbeitet mit Eigenschaften. Klingt einfach? Ja, aber es gibt Nuancen.

Die Hauptfalle: Boolean-Attribute

Das bekannteste Beispiel, das Anfängern Kopfzerbrechen bereitet, sind Kontrollkästchen, Optionsfelder und andere Elemente mit Boolean-Attributen (checked, disabled, selected, readonly).

Stellen Sie sich vor, Sie haben dieses HTML:

<input type="checkbox" id="myCheckbox" checked>

Sie möchten überprüfen, ob das Kontrollkästchen aktiviert ist. Logischerweise schreiben Sie so:

console.log( $('#myCheckbox').attr('checked') ); // "checked" (Zeichenkette!)\nconsole.log( $('#myCheckbox').prop('checked') ); // true (Boolean!)

Da ist der Unterschied! .attr() gibt die Zeichenkette "checked" zurück, wenn das Attribut im HTML vorhanden ist, und undefined, wenn es fehlt. .prop() hingegen gibt true oder false zurück, abhängig vom aktuellen Zustand des Elements im DOM.

Jetzt das Interessante: Was passiert, wenn der Benutzer das Häkchen entfernt?

// Nachdem der Benutzer das Häkchen entfernt hat:\nconsole.log( $('#myCheckbox').attr('checked') ); // "checked"! (HTML hat sich nicht geändert)\nconsole.log( $('#myCheckbox').prop('checked') ); // false (Zustand hat sich geändert)

Deshalb ist die Verwendung von .attr() zur Überprüfung des Zustands eines Kontrollkästchens ein Fehler. Das Attribut checked im HTML bleibt unverändert, während die Eigenschaft checked im DOM dynamisch wechselt. .prop() liefert immer die aktuelle Antwort.

Faustregel

Es gibt eine einfache Regel, die Ihnen hilft, keine Fehler zu machen:

\n
• Verwenden Sie .prop(), wenn Sie den dynamischen Zustand eines Elements abrufen oder ändern müssen (z. B. checked, disabled, selected, value bei input).
\n
• Verwenden Sie .attr(), wenn Sie ein statisches Attribut aus dem HTML lesen oder ändern müssen (z. B. href, src, data-*, id, class).
\n

Merken Sie sich: .prop() – für Eigenschaften, die sich während der Arbeit ändern. .attr() – für Attribute, die im Markup festgelegt sind.

Schritt-für-Schritt-Beispiel: Arbeiten mit disabled

Lassen Sie uns einen weiteren klassischen Fall durchgehen – eine Schaltfläche mit dem Attribut disabled.

<button id="myButton" disabled>Drück mich</button>