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 Standalone nutzbar und ist mit der Version 1.3 des JavaScript-Frameworks jQuery veröffentlicht worden. Sizzle ist nativer Bestandteil von jQuery; weil es von anderen Programmbibliotheken nicht abhängt, können Entwickler diese Engine aber auch in ihr Projekt integrieren.[1]
Problematik
[Bearbeiten | Quelltext bearbeiten]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] Mit HTML5 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.
Sizzle nimmt dem Entwickler diese Arbeit ab und stellt eine browserübergreifende, intuitive API bereit.
Prinzip
[Bearbeiten | Quelltext bearbeiten]Die Selektion ist nahezu identisch mit denen der Cascading Style Sheets, auch CSS3-Selektoren werden unterstützt.
Beispiel
[Bearbeiten | Quelltext bearbeiten]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 example.org enthalten, erfolgt so:
Sizzle('a[href*="example.org"]');
Da Sizzle nahtlos in jQuery integriert ist, erfolgt eine Selektion in diesem Framework nach dem gleichen Prinzip:
$('a[href*="example.org"]');
Weblinks
[Bearbeiten | Quelltext bearbeiten]Einzelnachweise
[Bearbeiten | Quelltext bearbeiten]- ↑ Kurze Einführung in Sizzle ( des vom 25. September 2011 im Internet Archive) Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.
- ↑ Eine Beispielfunktion für das Selektieren aller Elemente einer gleichen Klasse, ohne Nutzung von Sizzle ( des vom 24. September 2011 im Internet Archive) Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.
- ↑ Browser-Unterstützung für getElementsByTagName()
- ↑ Internet-Explorer-kompatible Lösung für getElementsByClassName
