jQuery prop(), attr() und val() richtig verwenden

Mit jQuery 1.6 wurde die jQuery-Funktion prop() zum Zugriff auf Element-Eigenschaften eingeführt. Im gleichen Zuge wurde die jQuery-Funktion attr() auf den Zugriff auf Element-Attribute reduziert. Diese Artikel erklärt die Unterschiede zwischen

und zeigt, wann die jQuery-Funktionen

verwendet werden sollten. Für Ungeduldige gibt es eine am Ende eine Zusammenfassung.

Wer tiefer in JQuery einsteigen möchte und ein gutes deutschsprachiges Buch sucht, dem empfehle ich jQuery: Das Praxisbuch (Galileo Computing).

Was ist ein Attribut (attribute)?

Unter einem Attribut versteht man eine Zusatzinformation zu einem HTML-Element im HTML-Quelltext. Attribute bestehen aus einem Name-Wert-Paar, so hat das folgende Input-Element 

    <input type="checkbox" value="1" checked="checked" />

die Attribute Type, Value und Checked. Die Name-Wert-Paare sind wie folgt

Name Wert
type checkbox
value 1
checked checked

Ein Attribute behält im Webbrowser immer seinen initialen Wert, es sei denn der HTML-Quelltext wird überschrieben. Wird im Browser in einem Select-Element ein anderes als das initial über das Attribute selected ausgewählte Option-Element ausgewählt, so ändert sich weder der Wert des Attributs selected im initial ausgewählten, noch wird das Attribut selected im neu ausgewählten Element gesetzt.

Was ist eine Eigenschaft (property)?

Der Browser erzeugt aus dem HTML-Quelltext ein internes Modell. Neben Diese Modell, bzw. seine Schnittstelle wird auch als Document-Object-Model bezeichnet. Für jedes Attribut eines HTML-Elements existiert eine korrespondierende Eigenschaft (property) im entsprechenden Objekt (object). Neben diesen Eigenschaften (properties) besitzen die Objekte noch weitere, für welche keine korrespondierenden Attribute existieren. Beispiele solcher Properties sind

  • window.location
  • selectedIndex
  • tagName
  • nodeName
  • nodeType
  • ownerDocument
  • defaultChecked
  • defaultSelected

Zur Laufzeit arbeitet der Browser Vereinfacht dargestellt auf den Objekten im DOM. Eigenschaften von Objekten (Knoten) im DOM können anders als Attribute ihre Werte ändern, z.B. wenn eine Eingabe gemacht oder ein Wert in einem Select-Element ausgewählt wird. Auch können die Werte programmatisch über das DOM ausgelesen oder verändert werden.

Was ist ein Wert (value)?

In Formularfeldern wie input, select, textarea gibt es das Attribut/die Eigenschaft value, welches den Wert der Felder enthält. Über das Attribut value kann ein Text angegeben werden, mit dem das Feld vorbelegt wird. In der Eigenschaft value ist der aktuelle Wert des Feldes abrufbar. 

    <input type="text" value="foo" />

jQuery attr()

Über die jQuery Funktion attr() kann lesend und schreibend auf die Werte von Attributen zugegriffen werden. Ausgehend von den HTML-Elementen 

    <a name="Baum" />
    <a name="Blume" href="blume.html" />

Beim Lesezugriff wird der Wert des angegebenen Attributs im ersten Element der Auswahl zurückgegeben. 

    $('a').attr('alt');
    // Ergebnis: "Baum"
    
    $('a').attr('href');
    // Ergebnis: "undefined"

Beim Schreibzugriff werden die Attributwerte in allen Elementen der Auswahl überschrieben 

    $('a').attr('href', 'neu.html');
    // Ergebnis: Alle Links zeigen nun auf 'neu.html'

Unterschiede jQuery 1.5.*, 1.6.0 und 1.6.1+

Bis jQuery 1.5.* gab die jQuery-Funktion attr() neben den Werten der angefragten Attribute besonders im Kontext von Formularen häufig auch Werte von Eigenschaften (properties) zurück und wurde mangels Alternativen zum Zugriff auf beide von Entwicklern verwendet.

Mit jQuery 1.6.0 wurde attr() strikt auf den Zugriff aut HTML-Attribute eingeschränkt. Dies führte zu vielen Inkompatibilitäten mit älterem Code und löste eine große Debatte aus.

Mit jQuery 1.6.1+ wurde die jQuery-Funktion attr() aus Gründen der Abwärtskompatibilität wieder weitgehend an die Funktionsweise vor 1.6.0 angeglichen. Kleine Unterschiede bleiben allerdings. So wird für die Attribute/Eigenschaften checked und selected statt wie bisher true/false nun in gängigen Browsern String "checked" bzw. undefined zurückgeben.

Attribut/Eigenschaft Rückgabewert jQuery 1.5.4 Rückgabewert jQuery 1.6.1+
$(‚input:checkbox‘).attr(‚checked‘) true/false

„checked“/undefined
$(‚option‘).attr(’selected‘) true/false

„selected“/undefined

Verwendung von jQuery attr()

Laut Dokumentation soll die jQuery-Funktion attr() ab 1.6.1 zum Zugriff auf nicht boolsche Attribute/Eigenschaften verwendet werden. Also weitgehend äquivalent zu seiner Verwendung vor jQuery 1.6.

Abweichend davon empfehle ich attr() nur für den den Zugriff auf nicht boolsche Attribute zu verwenden, einfach aus Gründe der Sauberkeit. Auch gibt es hierdurch einen marginalen Performancevorteil, da die jQuery-Funktion attr() beim Zugriff auf Properties auf prop() zurückgreift.

jQuery prop()

Ab jQuery 1.6.0 kann über die Funktion prop() auf die aktuellen Werte von Objekt-Eigenschaften zugegriffen werden.

Ausgehend von den HTML-Elementen: 

    <input type="checkbox" />
    <input type="checkbox" checked="checked" />

kann wie folgt die Eigenschaft checked des ersten Elements in der Auswahl geprüft werden: 

    $('input:checkbox').prop('checked');
    /* Ergebnis: false */

Der Wert der Eigenschaft checked kann wie folgt für alle Elemente der Auswahl geändert werden: 

    $('input:checkbox').prop('checked', false);
    /* Ergebnis: Keine Checkbox mehr ausgewählt */

Speziell bei der Arbeit mit Formularen bietet sich die Verwendung von jQuery prop() zum Zugriff auf die boolschen Eigenschaften checked und selected an.

Attribut/Eigenschaft Rückgabewert jQuery 1.5.4 Rückgabewert jQuery 1.6.1+
$(‚input:checkbox‘).prop(‚checked‘) nicht unterstützt

true/false
$(‚input:checkbox‘).prop(’selected‘) nicht unterstützt

true/false

Verwendung von jQuery prop()

Laut Dokumentation soll prop() nur für den Zugriff auf boolsche Eigenschaften und solche, für die kein äquivalentes Attribut existiert, verwendet werden.

Abweichend davon empfehle ich die jQuery-Funktion prop() für den Zugriff auf alle Eigenschaften (properties) sowie auf boolsche Attribute.

jQuery val()

Für den Zugriff auf Werte von Formularfeldern wurde die jQuery-Funktion val() eingeführt, über die auf die Eigenschaft value der Felder zugegriffen werden kann. Außerhalb von Formularfeldern ist val() ohne Bedeutung.

Ausgehend von den HTML-Elementen: 

    <input type="text" value="abc" />
    <input type="text" value="def" />


kann wie folgt die Eigenschaft value des ersten Elements in der Auswahl geprüft werden:

    $('input:text').val();
    /* Ergebnis: false */

Der Wert der Eigenschaft value kann wie folgt für alle Elemente der Auswahl geändert werden: 

    $('input:text').val('ghi');
    /* Ergebnis: Alle Input-Felder werden mit ghi belegt */

Verwendung von jQuery val()

Für die einen steht val() für bessere Lesbarkeit, für mich ist die weitere Verwendung von val() seit der Einführung von prop() unnötig, da ebenfalls über prop() auf die Eigenschaft zugegriffen werden kann.

Zusammenfassung

Unter einem Attribute versteht man eine Zusatzinformation zu einem HTML-Element im HTML-Quelltext. Attribute ändern Ihren Wert zur Laufzeit nicht. Aus dem HTML-Quelltext erzeugt der Browser zur Laufzeit das Document-Object-Model (DOM). HTML-Elemente werden im DOM durch Objekte repräsentiert. Properties sind Eigenschaft eines Objekts, die sich zur Laufzeit ändern können.

jQuery attr() sollte nur noch für den Zugriff auf nicht boolsche Attribute verwendet werden. Auf boolsche Attribute (checked, selected, etc.) sowie auf alle Properties kann mit jQuery prop() zugegriffen werden. Die Verwendung von jQuery val() zum Zugriff auf die Eigenschaft value von Formularfeldern kann aufgrund besserer Lesbarkeit prop() vorgezogen werden.

Ich hoffe, mit diesem Artikel etwas Licht in das Thema „jQuery prop() attr() val()“ gebracht zu haben. Auch wenn die Änderung jetzt schon einige Zeit her ist stiftet dieses Thema leider immer noch Verwirrung.

Veröffentlicht von

www.mabraham.de

Kommt noch.