smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

jQuery: Kontext für Selektoren verwenden

28. März 2013
Stephan
jQuery: Kontext für Selektoren verwenden um ein DOM-Element auszuwählen

Eine der meist genutzten Funktionen in jQuery ist wohl die jQuery-Funktion zum Auswählen von DOM-Elementen.

Die Auswahl der Elemente erfolgt dabei über sogenannte Selektoren. Was hierbei oftmals nicht beachtet wird, ist die Tatsache, dass wir neben der Angabe des Selektors zusätzlich einen Selektorkontext angeben können. Die Angabe eines Kontexts ist sinnvoll, um die Performance bei der Suche der Elemente zu verbessern.

In diesem Artikel erkläre ich euch die Verwendung eines Selektorkontexts in jQuery.

Der standardmäßige Kontext

Standardmäßig sucht jQuery die Elemente im ganzen Dokument. Das lässt sich mit der Eigenschaft context nachvollziehen:

// Ausgabe: document
console.log($('div').context);

Je mehr Elemente in einem Dokument sind, desto länger kann es dauern, bis die gesuchten Elemente gefunden sind.

Individuellen Kontext angeben

jQuery bietet uns aber glücklicherweise eine Möglichkeit den Kontext selbst anzugeben. Dadurch können wir den Suchbereich stark eingrenzen und so die Performance bzgl. der Suche verbessern.

Nehmen wir einfach mal ein einfaches Beispiel an:

<div id="mySpanWrap">
    <span>1</span>
    <span>2</span>
</div>
<div id="yourSpanWrap">
    <span>3</span>
    <span>4</span>
</div>

Jetzt möchten wir die span-Elemente innerhalb des mySpanWrap-Elements ermitteln. Das könnten wir nun wie folgt erledigen:

$('#mySpanWrap span');

Das Problem hierbei ist, dass jQuery die Selektorangabe von hinten abarbeitet. Bedeutet also, dass erst alle span-Elemente im Dokument gesucht werden. Anschließend werden die span-Elemente verworfen, dessen Elternelemente keine ID mySpanWrap haben.

Vorteilhafter wäre es, wenn wir durch Angabe eines Kontexts die Suche eingrenzen:

$('span', '#mySpanWrap');

Nun sucht jQuery zuallererst das Element mit der ID mySpanWrap und erst dann die darin befindlichen span-Elemente.

Um das vielleicht besser nachzuvollziehen, schaut euch Folgendes an:

var mySpanWrap = $('#mySpanWrap')[0];

// Ausgabe: <div id="mySpanWrap">
console.log($('span', mySpanWrap).context);

Der Kontext ist also nicht mehr das Dokument, sondern das mySpanWrap-Element.

Kontext mittels find

Die Performance lässt sich aber noch weiter verbessern. Dafür muss man wissen, dass die Angabe des Kontexts intern so gehandhabt wird, als ob die find-Funktion aufgerufen wurde.

Aus diesem Code:

$('span', '#mySpanWrap');

erstellt jQuery intern folgenden Code:

$('#mySpanWrap').find('span');

Vergleicht man die Kontextvariante mit der find-Variante hinsichtlich dessen Performance, stellt man fest, dass find normalerweise schneller ist.

Auf jsperf.com findet ihr einen entsprechenden Performance-Test: jQuery .find() vs. context selector

Aus dem Grund ist es sogar anzuraten, die find-Funktion direkt zu verwenden.

Fazit

Durch die Angabe eines Selektorkontexts bzw. der Verwendung der Funktion find könnt ihr die Suche eines DOM-Elements eingrenzen. Der Vorteil liegt darin, dass nicht mehr das ganze Dokument nach den gesuchten Elementen durchsucht werden muss und so aus Sicht der Performance schneller ist.

War euch bewusst, dass ihr einen individuellen Selekorkontext angeben könnt? Was haltet ihr davon?

Kommentare  
0 Kommentare vorhanden
0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!