JavaScript/DOM/Document/querySelector

Die Methode querySelector() gibt das erste Element zurück, das dem angegebenen CSS-Selektor (auch mehrere, durch Komma getrennte, Angaben möglich) entspricht.

Syntax

element = document.querySelector(selectors);

• selectors: Zeichenkette einer oder mehrere, durch Komma getrennten, Selektoren
• element: Element-Objekt

Die Methode ist außer für das Dokument-Objekt auch für Objekte mit den Schnittstellen DocumentFragment und Element definiert.

Mit getElementById kann nur ein einziges Element identifizert werden; das Durchsuchen der mit document.getElementsByTagName("p")[0] etc. erzeugten live node list ist mitunter ziemlich umständlich. Deshalb wurden mit querySelector() und querySelectorAll() zwei Methoden eingeführt, die eine Seite bequem und komfortabel nach auch im CSS verwendeten Selektoren durchsuchen und diese dann zurückgeben.

CSS-Selektoren können Elemente, Klassen und Ids; aber eben auch Attributsselektoren sein, die einen bestimmten Wert haben. In diesem Beispiel wird z.B. der Attributselektor [aria-selected="true"] abgefragt.

Anwendungsbeispiele

Beispiel So sieht's ausQuellcode

<p>Klicken Sie auf den Button, um den ersten Absatz der Klasse „beispiel“ zu ändern.</p>
 
<button>Los!</button>
 
<p class="beispiel">Dies ist ein Absatz der Klasse „beispiel“.</p>
<p class="beispiel">Dies ist ein Absatz der Klasse „beispiel“.</p>

  document.querySelector('button').addEventListener('click',Aendern);
  function Aendern() {
    document.querySelector('.beispiel').innerHTML = "Nur der erste Absatz wurde erfasst.";
  }

Die querySelector()-Methode durchsucht den Elementbaum nach einem Element mit dem CSS-Selektor .beispiel. Mittels innerHTML wird dann der Inhalt geändert. Zuvor wird für das Button-Element ein Eventhandler registriert.

Falls es keinen Treffer gibt, wird Null zurückgegeben.

Beachten Sie: Die querySelector()-Methode gibt nur das erste Element, auf das der Selektor passt, zurück. Um alle Elemente mit den entsprechenden CSS-Selektoren zurückzugeben, verwenden Sie querySelectorAll().

Abfrage von Attributselektoren mit bestimmtem Wert

• JavaScript/Anwendung und Praxis/zugängliche Registerkarten

Beispiel So sieht's ausQuellcode

    function clickHandler(elem) {
      var target = elem.target; 

      var selectedTab = document.querySelector('[aria-selected="true"]');
      selectedTab.setAttribute('aria-selected', false);
      target.setAttribute('aria-selected', true);

      var panels = document.querySelector('[aria-hidden="false"]');
      panels.setAttribute('aria-hidden', true);
	  
      var panelId =target.getAttribute('aria-controls'),
	  panel = document.getElementById(panelId);  
      panel.setAttribute('aria-hidden', false);
    }

Durch einen Klick wird die Funktion clickHandler() aufgerufen, die mit event.Target das geklickte Tab identifiziert.

Bevor der Zustand dieses Tab nun auf aria-selected="true" geändert wird, wird mit querySelector das bisher ausgewählte Tab gesucht und auf aria-selected="false" gesetzt.

Analog wird mit den Panels verfahren. Da der Wert des aria-controls-Attributs der id des dazugehörenden Panels entspricht, kann es über die Variable panelId ausgewählt und dann auf aria-hidden="false"gesetzt werden.

Weblinks

• W3C: Selectors API
• MDN: document.querySelector