JavaScript/DOM/Document/querySelector

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari

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.

Inhaltsverzeichnis


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.

[Bearbeiten] Anwendungsbeispiele

Beispiel ansehen …
<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().

[Bearbeiten] Abfrage von Attributselektoren mit bestimmtem Wert

Beispiel ansehen …
    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.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML