Die bisherigen Möglichkeiten, auf DOM-Elemente zuzugreifen, beschränkte sich auf drei Methoden. Möglich war der Zugriff auf ein Element mit einer bestimmten ID, auf Elemente einer bestimmten Klasse und auf Elemente eines bestimmten Typs. Sobald mehrere unterschiedliche Elemente und Klassen berücksichtigt werden sollten, wurde es kompliziert.

Möchte man beispielsweise auf alle P-Elemente derselben Klasse zugreifen und gleichzeitig auf alle SPAN-Elemente, um diese fett auszuzeichnen, musste man das bislang relativ umständlich angehen:

for (var i = 0; i < document.getElementsByTagName("p").length; i++) {
  if (document.getElementsByTagName("p")[i].className == "info") {
    document.getElementsByTagName("p")[i].style.fontWeight = "bold";
  }
}

for (var i = 0; i < document.getElementsByTagName("span").length; i++) {
  document.getElementsByTagName("span")[i].style.fontWeight = "bold";
}

Da gerade solche Zugriffe nicht selten sind, bringen viele JavaScript-Frameworks wie jQuery Funktionen mit, mit denen sich solche Zugriffe vereinfacht ausführen lassen. Mittlerweile gibt es jedoch native JavaScript-Methoden, die denselben Dienst leisten wie die entsprechenden Funktionen der Frameworks.

Die zwei Methoden „querySelector()“ und „querySelectorAll()“ vereinfachen den komplexen Zugriff auf DOM-Elemente. Mit „querySelector()“ kann man auf das erste zutreffende Element zugreifen, während „querySelectorAll()“ alle zutreffenden Elemente in einem Array zurückgibt, so wie es beispielsweise auch „getElementsByTagName()“ macht.

Das oben vorgestellte Beispiel lässt sich dank „querySelectorAll()“ kürzer ausdrücken:

for (var i = 0; i < document.querySelectorAll("p.info, span").length; i++) {
  document.querySelectorAll("p.info, span")[i].style.fontWeight = "bold";
}

Um mit der Selector-API Elemente anzusprechen, bedient sie sich derselben Syntax, wie sie bei CSS-Angaben verwendet wird. Sie kann auf diese Weise auch als Ersatz für „getElementById()“ verwendet werden:

document.querySelector("#kopf").style.color = "red";

Auch die Methoden „getElementsByTagName()“ und „getElementsByClassName()“ kann sie ersetzen und bietet dabei noch einen sehr viel differenzierteren Einsatz. Lassen sich mit den beiden alten Methoden jeweils nur ein Elementtyp beziehungsweise eine Klasse abfragen, kann man mit „querySelector()“ und „querySelectorAll()“ mehrere Elemente und Klassen kombinieren:

document.querySelector("h1, h2, h3").style.color = "red";
document.querySelector("p, .info").style.fontWeight = "bold";

Die erste Angabe berücksichtigt alle H1-, H2- und H3-Elemente und die zweite Angabe alle P-Elemente sowie alle Elemente mit der Klasse „info“. Geändert wird in diesen Fällen nur das jeweils erste Element, das die Kriterien erfüllt. Mit „querySelectorAll()“ und einer „for“-Schleife lassen sich alle Elemente ändern, die die Kriterien erfüllen.

Auch Tiefen- und Geschwisterselektoren, wie man sie von CSS kennt, können angewendet werden. So kann man beispielsweise auf P-Elemente zugreifen, die einem H1-Element folgen:

document.querySelector("h1 + p").style.fontWeight = "bold";

Die beiden neuen Methoden bieten endlich eine flexible Möglichkeit, auf DOM-Elemente zuzugreifen, ohne die bisherigen Methoden aufwändig miteinander kombinieren zu müssen. Alle aktuellen Browser, auch der Internet Explorer, unerstützen die Selector-API. Wer bislang jQuery eingesetzt hat, um schnell und einfach auf DOM-Elemente zuzugreifen, kann fortan die Selector-API verwenden.

Setzt ihr „querySelector()“ und „querySelectorAll()“ bereits ein? Wie sind eure Erfahrungen damit?

Weiterführende Links zum Thema JavaScript:

• JavaScript: Mit File-API auf lokale Dateien zugreifen
• Impress.js: Cooles Präsentationtool mit HTML5 und CSS3
• HTML5 und Local Storage: Daten für Offlinebetrieb speichern