querySelector, querySelectorAll –

querySelector das erste Element mit einem bestimmten CSS Selector zurück

querySelector wählt Elemente anhand eines CSS-Selektors (z.B. h1 oder li:active) aus und gibt das erste Element mit dem angegebenen CSS-Selektor zurück. querySelector und querySelectorAll sind das Pendant zu jQuery $ im naturreinen Javascript (Vanilla).

Wenn mehr als ein passendes Element gefunden wird, gibt querySelector das erste gefundene Element zurück, querySelectorAll alle gefundenen Elemente in einer NodeList zurück.

querySelector wird mit einem CSS-Selektor aufgerufen und gibt das erste Element zurück, auf das dieser Selektor passt. Der Parameter von querySelector ist ein String mit der Syntax für den CSS-Selektor – wie in der CSS-Datei oder im style-Tag.

let header = document.querySelector ("h1.header");

Wenn alle Element gefordert sind, die einem CSS-Selektor entsprechen, sammelt querySelectorAll alle Elemente mit diesem Selektor.

let images = document.querySelectorAll ("img");

querySelector() und querySelectorAll() lösen komplexe CSS-Query-Strings auf, die von getElementById, getElementsByTagName oder getElementsByClassName nur mit großem Aufwand umsetzen können.

In einfachen Anwendungen ersetzen sie das Einbinden von jQuery (You might not need jQuery). jQuery hat allerdings über die CSS-Querys hinaus Filter wie filter(), find(), children(), parent(), map(), not() und gleicht Browser-Inkonsistenzen aus.

querySelector: Nimm nen CSS-Selektor

document.querySelector('h3')          das erste h3-Element     

document.querySelector('.ci')         das erste Element mit der Klasse .ci

document.querySelector('#entry')      Element mit id="entry"

document.querySelector('li:nth-child(even)') erstes li-Element mit geradem Index           

querySelector und querySelectorAll sind flexibler als document.getElementById und getElementsByTagName oder getElementsByClassName und obendrein schneller.

Beide Methoden können sowohl den ganzen DOM-Baum als auch einen einzelnen Zweig parsen. Jeder CSS-Selektor funktioniert als Parameter.

let bluetext = document.querySelector('h3[style="color:blue"]').innerText;

Wenn querySelector nichts findet …

Wenn kein Element mit dem Selektor existiert, gibt querySelector ("elem") false zurück.

if (!document.querySelector("#maus")) {
   console.log ("Keine Maus in Sicht");
}

Wenn kein Element mit den angegebenen Selektoren existiert, gibt querySelectorAll ("elem") eine leere NodeList zurück.

if (document.querySelectorAll(".foo").length === 0) {
   console.log ("keine Elemente gefunden");
}

closest

querySelector sucht innerhalb eines Elements sozusagen nach unten. closest ist eine Art von Umkehrung von querySelector und sucht oberhalb des Elements.

Alles über oder was?

<p class="over">Alles über oder was?</p>
let over = document.querySelector(".over").closest("article").querySelector("h2").innerHTML;
Nimm nen CSS-Selektor

Keine Unterstützung für closest () mit IE11 – also in dieser Form nicht nutzbar. Ein Polyfil für closest gibt es bei GitHub.

querySelector und Pseudo-Elemente

Pseudo-Elemente sind kein Bestandteil des DOM. Vor querySelector und querySelectorAll konnte Javascript keine Pseudo-Elemente wie ::before und ::after erreichen. In der Tat schafft das nicht einmal jQuery.

Mit getComputedStyle funktioniert dann der Zugriff auf Pseudo-Elemente:

  • Silentium
  • Gaudi
  • Pokal der Stille
CSS / HTML
.cups li:nth-child(1)::before { 
   content: "url(icon-pen.png) ";
}

<ul class="cups">
   <li>Silentium</li>
   …
Javascript
let icon = window.getComputedStyle (
   document.querySelector('.cups li'), ':before').getPropertyValue('content');
console.log (icon);

Da wir hier ein Pseudo-Element vor uns haben und Pseudo-Elemente kein Teil des DOMs sind, kann Javascript die CSS-Regel auch nicht ohne Weiteres ändern.

Es gibt zwar getComputedStyle, aber kein setComputedStyle. Javascript kann allerdings ein style-Element anlegen und das Pseudo-Element mit innerHTML beschreiben.

let style = document.createElement('style');
style.innerHTML = '.cups li:nth-child(1)::before {content: url(icon-pen-green.png) " "}';

document.querySelector('head').appendChild(style);

querySelector hängt das style-Element anschließend mit appendChild an das Ende von head.