JQuery – Wann .attr(), .prop() und .val() verwenden?

0
499

Seit der Änderung von JQuery 1.6 gibt es Unsicherheit, wann man wie auf ein Value zugreift. Daher versuche ich, die Unterschiede dieser Zugriffsmöglichkeiten etwas transparenter darzustellen – und hoffe damit viele Fragen beantworten zu können.

Um zu verstehen, welche Änderung kam – muss man erstmal verstehen, wie .attr() und .prop() wirklich funktionieren.

Wie funktioniert .attr()?

Mittels .attr() kann lesen und schreibend auf die Werte von Attribute zugegriffen werden, die zum Zeitpunkt des ersten Ladens der Webseite existieren. Es liest also grundsätzlich immer nur den Wert aus, der initial existierte. Attribute ändern zur Laufzeit ihre Werte nicht.

Wichtig: .attr() liefert immer einen String zurück. Bei Checkboxen wäre dies „checked“ oder „undefined“.

Ein klassisches Beispiel:

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

Attribute sind in unserem Beispiel jetzt: Type=“checkbox“, Value=“foo“ und checked=“checked“ (Inhalte werden als Strings übergeben)

Wie funktioniert .prop()?

Mittels .prop() kann lesen und schreiben auf die Werte von Properties zugegriffen werden, auch auf jene die sich während einer Browser-Sitzung verändern. Somit ist es möglich, jederzeit auf den korrekten State / Status eines Elements zuzugreifen.

Wichtig: .prop() liefert immer den Type / Wert zurück. Bei Checkboxen ist dies true / false zum Beispiel.

Properties können sein:

  • tagName
  • nodeName
  • defaultChecked
  • defaultSelected

Im oben genannten Beispiel würden wir mittels .prop(‚checked‘) also ein true / false bekommen, anstatt „checked“ oder „undefinied“.

Welche Umstellung kam mit JQuery 1.6 – wie war es vorher und wie wirkt es sich aus?

Die Neuerung von JQuery 1.6 bewirkte, dass man mittels .attr() nicht mehr alle Values auslesen konnte. Somit haben viele Webseiten, die mittels .attr() immer den aktuellen Status eines Elements auslesen wollten, nicht mehr korrekt funktioniert. Dieser Umstand wurde allerdings mit der Folgeversion 1.6.1 schon behoben – darüber hinaus wurde die neue Funktion .val() eingeführt.

Was ist nun mit .val()?

Mittels .val() können auf die Werte von Formular Elementen zugegriffen werden. Es ist gleich mit der Funktion .prop(‚value‘).

Im oben genannten Beispiel würden wir als „foo“ als Rückgabe erhalten. Alternativ kann dieser Wert auch mit .prop() abgerufen werden.

Grundsätzlich: Was heißt zur Laufzeit und was ist DOM?

Wenn eine Internetseite aufgebaut wird, wird vom verwendet Internet Browser (Mozilla Firefox, Safari, Google Chrome, etc.) ein internes Document-Object-Model – kurz DOM – erzeugt. Alle HTML-Elemente werden im Anschluss als Objekte im DOM repräsentiert. Ein Attribut wird also initial belegt – die Objekte im DOM, beschreiben dann die Eigenschaften der Objekte, die sich auch zur Laufzeit ändern können.

Beispiele / Best Practices

  1. Einen Button deaktivieren mittels .prop()

Gegeben ist folgendes Javascript Fragment:

function disable_me(i)
{
     $("#disable_button_" + i).prop("disabled", true);
}

und folgendes HTML:

<button id="disable_button_5" onclick="disable_me(5)">Disable Me</button>

Meine Empfehlung (Best Practices), binding mit this verwenden:

$('.btn_disableme').on('click', function() {
     $(this).prop("disabled", true);
});

mit folgendem HTML:

<button class="btn_disableme">Disable Me</button>

2. Verwendung von .prop() und .attr() – Empfehlung!

Verwenden sie grundsätzlich .prop() anstatt .attr(). Somit können sie sicherstellen, das sie immer die korrekten und zum Zeitpunkt aktuellen Werte erhalten. Alternativ nutzen sie bei allen Formularelementen, bei denen sie bool als Rückgabewert erwarten .prop() und für die übrigen .val(). Übrigends, checked ist bei .prop() immer ein bool Rückgabewert – das gleiche gilt für selected.

3. Performance

.prop() wird nachgesagt, 2 bis 3 mal schneller als .attr() zu sein

Fazit:

  • .val() kann zwecks Lesbarkeit, anstatt .prop(‚value‘) verwendet werden
  • .prop() ist schneller und stabiler als .attr()
  • .attr() greift immer nur auf den initialen Wert eines Formularfeldes zu
  • .prop() kann immer der aktuell korrekte Wert eines Formularfeldes ausgelesen werden
  • .attr() sollte nur bei „nicht-bool“ Werten verwendet werden, da es immer nur Strings zurück gibt
  • .prop() sollte mindestens bei „bool“ Werten verwendet werden, da es auch den korrekten Type zurück gibt

Ich hoffe ich konnte dieses Thema etwas transparenter darstellen und einige Fragen hierzu beantworten. Für Fragen / Verbesserungsvorschläge / Kritik steht wie immer die Kommentarfunktion zur Verfügung. Vielen Dank!