Die Suche nach Elementen via CSS-Selektor war einst eine der großen Stärken des Frameworks jQuery. In diesem kurzen Tutorial geht es darum, wie man mit JavaScript ganz ohne Framework einfach auf Elemente im DOM via CSS-Selector referenzieren kann.
Was ist überhaupt das DOM?
Das Document Object Model (DOM) in Webbrowsern ist eine Schnittstelle, die die Struktur und den Inhalt von Webseiten als Objektbaum darstellt. Dadurch können Skripte, insbesondere JavaScript, die Elemente der Seite dynamisch ändern, neue Inhalte hinzufügen oder bestehende Inhalte modifizieren. Dieser Vorgang des Modifizierens von DOM-Elementen nennt sich DOM-Manipulation.
Die Baumstruktur ist durch verschiedene Knoten (Nodes) abgebildet. Dabei unterscheidet man Dokumenttyp-Knoten (<!DOCTYPE html>), Dokumentknoten (Elternknoten von html), Elementknoten, Textknoten, Attributknoten und Kommentarknoten. Man kann sich das bildlich etwa so vorstellen:
Die Elemente stehen zueinander in Beziehung, nachfolgend dargestellt:
Der alte Weg: getElementById oder getElementsByClassName
Natürlich das geht immer, Elemente mit Hilfe ihrer id oder mit ihrer Klasse holen. Das Problem ist, man ist auf die id bzw. Klasse beschränkt.
Die vielseitige Alternative: querySelector
Die Funktion querySelector gibt uns die Möglichkeit einfach per CSS-Selektor DOM-Elemente zu holen. Das hat natürlich einen großen Vorteil, denn man kann alles suchen und auch Pseudo-Selektoren und Kombinatoren dabei verwenden. Es kommt einfach nur auf den richtigen Selektor an.
Statt (wie oben) das Style-Attribut des Elements selbst zu manipulieren, sollte man aber lieber Klassen hinzufügen. Diese kann man dann übersichtlich und gut auffindbar im CSS-Style-Dokument formatieren.
Mehrere Element holen: Nodelist via querySelectorAll
Die Funktion querySelectorAll holt alle Elemente, auf die der CSS-Selektor selektiert und gibt ein Sammlung der DOM-Elemente als NodeList zurück. Über die NodeList kann natürlich iteriert werden und so ist jedes gefundene Element leicht erreichbar und manipulierbar.
Im unteren Beispiel werden alle Elemente mit dem Klassen-Attribut "panel" geholt und via Schleife ausgeblendet (durch hinzufügen einer entsprechenden Klasse).
Tipp: Statt Klassen kann man auch Data-Attribute nutzen
Um eine Trennung zwischen den Class-Attributen, die zur Formatierung in CSS genutzt werden und dem Auffinden von Elementen via JavaScript zu erhalten, wäre auch die Nutzung von Data-Attributen möglich.
Bei der Nutzung von Data-Attributen könnte man diese auch für entsprechende Informationen nutzen, zum Beispiel um nur bestimmte Panel zu suchen oder das obige Beispiel einfacher umsetzen:
Fazit
In der modernen Webentwicklung mit JavaScript sind die Funktionen querySelector und querySelectorAll nicht wegzudenken. CSS-Selektoren mit all ihren Möglichkeiten zur Suche zu nutzen ist wirklich furchtbar praktisch und wird seit 2015 in allen Browsern unterstützt.
