JavaScript/DOM/Document/querySelectorAll

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Methode Document.querySelectorAll() gibt eine Liste von Elementen zurück, die dem angegebenen CSS-Selektor (auch mehrere, durch Komma getrennte, Angaben möglich) entsprechen.

  • IE 8
  • Firefox
  • Chrome
  • Safari
  • Opera

Syntax

elements = document.querySelectorAll(selectors);

  • selectors: Zeichenkette einer oder mehrere, durch Komma getrennten, Selektoren
  • element: Liste von Element-Objekten

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 sogar nach einem bestimmten Wert wie [aria-selected="true"] selektiert werden.

[Bearbeiten] Anwendungsbeispiel

Beispiel ansehen …
    <p>Klicken Sie auf den Button, um den ersten Absatz mit der class="beispiel" zu ändern.</p>
    <button onclick="aendern()">Los!</button>
 
    <p id="ausgabe"></p>
 
    <p class="beispiel">Dies ist der erste Absatz mit der class="beispiel".</p>
    <p class="beispiel">Dies ist der zweite Absatz mit der class="beispiel".</p>
    <p class="beispiel">Dies ist der drite Absatz mit der class="beispiel".</p>
  function aendern() {
    var treffer = document.querySelectorAll('p.beispiel');
    var x = document.getElementById('ausgabe');
    x.innerHTML = treffer;
  }

Die querySelectorAll()-Methode durchsucht den Elementbaum nach Elementen mit dem CSS-Selektor .beispiel.

Wenn Sie den linken Button klicken, wird der Inhalt mittels innerHTML ausgegeben.

Wenn Sie auf den rechten Button klicken, wird mit nodelist.length die Anzahl der Absätze mit der Klasse beispiel ermittelt. In einer Schleife wird diesen Absätzen dann eine andere Hintergrundfarbe gegeben.

[Bearbeiten] Weblinks


Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML