Übersicht: Selektion von DOM-Elementen


Basis CSS Selektoren

jQuery unterstützt beinahe alle gängigen CSS Selektoren um sowohl einzelne, als auch mehrere Elemente gleichzeitig aus der DOM-Struktur auszuwählen. Somit kann z.B. per Tag-Name, ID, Klasse, als auch aus Kombinationen und Verschachtelungen dieser Selektoren, eine Auswahl getroffen werden.
Der Aufruf sieht wie folgt aus:
$("Selektor") bzw. jQuery("Selektor").
Beim Rückgabewert dieser Funktion handelt es sich um ein jQuery Objekt, auf dem nun weitere Operationen ausgeführt werden können - dazu aber später mehr.

Folgende Beispiele sollen die Nutzung der CSS Selektoren verdeutlichen:


Hierarchien und Attribute

Um noch flexibler Elemente selektieren zu können, gibt es über die Basisselektoren hinaus weitere Möglichkeiten die Elementauswahl einzugrenzen. Eine Möglichkeit ist die Nutzung von Hierarchie-Selektoren, d.h. es werden Elemente basierend auf ihrer Beziehung zueinander ausgewählt.
Folgende Beziehungen können genutzt werden:

Beispiele hierfür:


Eine weitere Möglichkeit ist die Anwendung von Attribut-Selektoren. Durch sie kann eine mit Standard CSS Selektoren getroffene Auswahl weiter eingegrenzt werden. Es ist möglich, sowohl nur nach dem Vorhandensein eines Attributes zu filtern $("Selektor[Attribut]"), als auch nach konkreten Werten bzw. Mustern zu suchen. z.B. $("Selektor[Attribut=Wert]"), $("Selektor[Attribut!=Wert]"), $("Selektor[Attribut^=Wert]"), $("Selektor[Attribut$=Wert]") und $("Selektor[Attribut*=Wert]"). Die Syntax dieser Ausdrücke ist angelehnt an die der regulären Ausdrücke. Auch hier einige Beispiele:


Filter

Neben den bereits vorgestellten Möglichkeiten Elemente zu selektieren, bietet jQuery durch die Verwendung von Filtern eine weitere flexible und dennoch einfache Möglichkeit, Elemente aus dem DOM Baum auszuwählen. Da es eine Vielzahl an Filtern gibt, die den Rahmen dieses Kapitels sprengen würde, sollen hier exemplarisch nur einige von ihnen vorgestellt werden.
Ähnlich wie bei den Attribut-Selektoren, welche auch eine Form von Filter darstellen, wird durch die Verwendung von Filtern eine Menge von Elementen eingegrenzt.

Anknüpfend an die Hierarchie-Selektoren kann auch mit Hilfe einiger Filter die Auswahl von Elementen, basierend auf ihrer Beziehung und Lage zueinander, erfolgen. Somit hat beispielsweise die Anwendung von :first bzw. :last auf eine Reihe von Elementen zur Folge, dass jeweils nur das erste bzw. letzte Element selektiert wird.
Die Anwendung von :nth-child(n) hingegen liefert das jeweils n-te Kind.
Beispiele:

Während die Filter :even und :odd die jeweils "geraden" und "ungeraden" Elemente der Reihe von Elementen liefern, auf die sie angewendet wurden, können die Schlüsselwörter even und odd auch als Eingabeparameter für den :nth-child(n)-Filter genutzt werden.

Mit Hilfe von Content Filtern kann auf den Inhalt bestimmter Elemente geprüft und danach gefiltert werden. So filtert beispielsweise :empty alle leeren Elemente heraus. Hingegen werden bei der Nutzung von :contains("Text") nur diejenigen Elemente herausgefiltert, die entsprechenden "Text" beinhalten (Case Sensitive!). Der :has("Selektor")-Filter ermöglicht es nur Elemente zu selektieren, die bestimmte andere Elemente beinhalten.

Eine weitere Art von Filtern wird im Rahmen von "Forms" eingesetzt. Einige von ihnen sind letztendlich nur eine Abkürzung für Filter, die auch mit Attribut-Selektoren realisiert werden können. Annähernd alle Formelemente werden durch sie abgedeckt und ermöglichen damit einen einfachen Zugriff.
Beispiele:

Abschliessend sollen noch die Möglichkeiten genannt werden, die Elemente nach ihrer Sichtbarkeit zu filtern (dafür gibt es die Filter :hidden und :visible) und bestimmte Elemente mit dem :not("Selektor")-Filter explizit auszuschliessen.

Für eine vollständige Übersicht aller Selektoren und Filter wird auf die jQuery Dokumentation verwiesen.