Sizzle Selector Engine

Die Sizzle Selector Engine ist eine auf JavaScript basierende Engine zum Selektieren von Elementen innerhalb des Document Object Models (DOM). Die Engine, entwickelt vom jQuery-Team, ist stand-alone nutzbar und ist mit der Version 1.3 des JavaScript-Frameworks jQuery veröffentlicht worden. Sizzle ist nativer Bestandteil von jQuery, durch die fehlende Abhängigkeit von anderen Programmbibliotheken können Entwickler diese Engine aber auch in ihr Projekt integrieren.^[1]

Problematik

JavaScript bietet dem Entwickler nur eingeschränkte Möglichkeiten, Elemente des DOMs direkt zu selektieren. Eine native und breit unterstützte Möglichkeit zum Selektieren eines Elementes mit einer gegebenen ID ist die Nutzung der Funktion getElementById('idName'). Webentwickler benötigen aber oft mehr Elemente eines gleichen Typs, etwa alle Elemente, die eine gleiche Klasse besitzen oder Elemente, die ein bestimmtes Attribut beinhalten. Für alle Einzelfälle muss der Entwickler oft mehrzeilige Funktionen schreiben, um eine browserkompatible Lösung zu schaffen^[2]. Die Funktion zum Selektieren aller Elemente eines gleichen Typs getElementsByTagName sowie eine Funktion zum Selektieren aller Elemente mit einem Klassennamen getElementsByClassName wird von älteren Browsern nicht fehlerfrei unterstützt^[3][4]. Sizzle nimmt dem Entwickler diese Arbeit ab und stellt eine browserübergreifende, intuitive API bereit.

Mit HTML 5 werden zwar viele Selektionen innerhalb des DOM vereinfacht, jedoch wird dieser Standard des World Wide Web Consortium noch nicht von allen Browsern fehlerfrei unterstützt.

Prinzip

Die Selektion ist nahezu identisch mit denen der Cascading Style Sheets, auch CSS3-Selektoren werden unterstützt.

Beispiel

Möchte man alle span-Elemente selektieren, die ein direktes Kind aller p-Elemente sind, so erfolgt dies durch folgenden Code:

Sizzle('p > span');

Das Selektieren von Links, die wikipedia.org enthalten, erfolgt so:

Sizzle('a[href *="wikipedia.org"]');

Da Sizzle nahtlos in jQuery integriert ist, erfolgt eine Selektion in diesem Framework nach dem gleichen Prinzip:

var wikiAnchors = jQuery('a[href *="wikipedia.org"]');

Einzelnachweise

1. ↑ Kurze Einführung in Sizzle
2. ↑ Eine Beispielfunktion für das Selektieren aller Elemente einer gleichen Klasse, ohne Nutzung von Sizzle
3. ↑ Browser-Unterstützung für getElementsByTagName()
4. ↑ Internet-Explorer-kompatible Lösung für getElementsByClassName