Document.querySelectorAll()

Die Methode querySelectorAll() von Document gibt eine statische (nicht live) NodeList zurück, die eine Liste der Elemente des Dokuments darstellt, die mit der angegebenen Selektorgruppe übereinstimmen.

elementList = parentNode.querySelectorAll(selectors);

selectors

Ein DOMString der einen oder mehrere Selektoren zum Abgleich enthält. Dieser String muss ein valider CSS-Selektor-String sein, andernfalls wird eine SyntaxError Exception ausgelöst. Weitere Informationen zu Selektoren und deren Verwaltung finden Sie unter DOM Elemente mittels Selektoren ermitteln. Es können mehrere durch Kommata getrennte Selektoren angegeben werden.

Eine statische (nicht-live) NodeList mit je einem Element-Objekt für jedes Element das mind. einem der angegebenen Selektoren entspricht oder eine leere NodeList im Falle keiner Übereinstimmungen.

SyntaxError

Die Syntax des selectors-String ist ungültig.

Um eine NodeList aller <p>-Elemente des Dokuments zu erhalten:

var matches = document.querySelectorAll("p");

Das folgende Beispiel gibt eine Liste aller <div>-Elemente innerhalb des Dokuments zurück, deren Klasse entweder "note" oder "alert" ist:

var matches = document.querySelectorAll("div.note, div.alert");

Hier erhalten wir eine Liste von <p>-Elementen, deren unmittelbares übergeordnetes Element ein <div> mit der Klasse "highlighted" ist und die sich in einem Container befinden, dessen ID "test" ist.

var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted > p");

Das folgende Beispiel nutzt einen Attribut-Selektor, um eine Liste von <iframe>-Elementen im Dokument zurückzugeben, die ein "data-src" Attribut besitzen:

var matches = document.querySelectorAll("iframe[data-src]");

Hier wird ein Attribut-Selektor verwendet, um eine Aufzählung der Listenelemente zurückzugeben, die in einer Liste mit der ID "userlist" enthalten sind und deren Attribut "data-active" den Wert "1" hat:

var container = document.querySelector("#userlist");
var matches = container.querySelectorAll("li[data-active='1']");

Sobald die NodeList der übereinstimmenden Elemente zurückgegeben wird, können Sie sie wie jedes Array untersuchen. Wenn das Array leer ist (d. h. die Eigenschaft length 0 ist), wurden keine Übereinstimmungen gefunden.

Ansonsten können Sie einfach die Standard-Array-Notation verwenden, um auf den Inhalt der Liste zuzugreifen. Sie können jede allgemeine Schleifenanweisung verwenden, wie etwa:

var highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach(function(userItem) {
  deleteUser(userItem);
});

querySelectorAll() verhält sich anders als die meisten JavaScript-DOM-Bibliotheken, was zu unerwarteten Ergebnissen führen kann.

Betrachten Sie dieses HTML mit seinen drei geschachtelten <div> Blöcken.

<div class="outer">
  <div class="select">
    <div class="inner">
    </div>
  </div>
</div>

var select = document.querySelector('.select');
var inner = select.querySelectorAll('.outer .inner');
inner.length; // 1, not 0!

Wenn Sie in diesem Beispiel ".outer .inner" im Kontext des <div> mit der Klasse "select" auswählen, wird das Element mit der Klasse ".inner" immer noch gefunden, obwohl .outer kein Nachkomme des Basis-Elements ist, auf dem die Suche durchgeführt wird (".select"). Standardmäßig überprüft querySelectorAll() nur, ob sich das letzte Element im Selektor im Suchbereich befindet.

Die :scope Pseudo-Klasse stellt das erwartete Verhalten wieder her, bei dem Selektoren nur mit Nachkommen des Basis-Elements übereinstimmen:

var select = document.querySelector('.select');
var inner = select.querySelectorAll(':scope .outer .inner');
inner.length; // 0

• DOM Elemente mittels Selektoren ermitteln
• Attribut-Selektoren im CSS-Leitfaden
• Attribut-Selektoren im MDN Lernbereich
• Element.querySelector() und Element.querySelectorAll()
• Document.querySelector()
• DocumentFragment.querySelector() und DocumentFragment.querySelectorAll()
• ParentNode.querySelector() und ParentNode.querySelectorAll()
• Code-Ausschnitte für querySelector()