DieDocument MethodequerySelectorAll()gibt eine statische (nicht dynamische)NodeList zurück, die eine Listeder Elemente des Dokuments darstellt, die mit der angegebenen Gruppe von Selektoren übereinstimmen.

Syntax

querySelectorAll(selectors)

Parameter

selectors

Ein String, der einen oder mehrere Selektoren zum Abgleichen enthält. Dieser Stringmuss ein gültiger CSS-Selektor-String sein; wenn nicht, wird eineSyntaxError Ausnahmeausgelöst.

Beachten Sie, dass die HTML-Spezifikation nicht verlangt, dass Attributwerte gültige CSS-Bezeichner sind. Wenn einclass- oderid-Attributwert kein gültiger CSS-Bezeichner ist, müssen Sie ihn entweder durch Aufrufen vonCSS.escape() auf den Wert oder durch eine der inEscaping characters beschriebenen Techniken im Selektor maskieren. SieheEscaping attribute values für ein Beispiel.

Rückgabewert

Eine nicht-dynamischeNodeList, die einElement-Objekt fürjedes Element enthält, das mit mindestens einem der angegebenen Selektoren übereinstimmt oder eine leereNodeList bei keinen Übereinstimmungen. Die Elemente sind in Dokumentenreihenfolge — das heißt, Eltern vor Kindern, frühere Geschwister vor späteren Geschwistern.

Ausnahmen

SyntaxErrorDOMException

Wird ausgelöst, wenn die Syntax des angegebenenselectors-Strings nicht gültig ist.

Beispiele

Erhalten einer Liste von Übereinstimmungen

Um eineNodeList von allen<p> Elementen imDokument zu erhalten:

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

Dieses Beispiel gibt eine Liste aller<div> Elemente im Dokumentzurück, die die Klasse entwedernote oderalert haben:

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

Hier erhalten wir eine Liste von<p> Elementen, deren unmittelbares Elternelementein<div> mit der Klassehighlighted ist und diesich in einem Container befinden, dessen IDtest ist.

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

Dieses Beispiel verwendet einenAttributselektor, um eine Liste der<iframe> Elemente imDokument zurückzugeben, die ein Attribut mit dem Namendata-src enthalten:

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

Hier wird ein Attributselektor verwendet, um eine Liste der Listeneinträge zurückzugeben, die ineiner Liste mit der IDuser-list enthalten sind und eindata-active Attribut haben,dessen Wert1 ist:

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

Zugriff auf die Übereinstimmungen

Sobald dieNodeList der übereinstimmenden Elemente zurückgegeben wird, können Sie siewie ein beliebiges Array untersuchen. Ist das Array leer (das heißt, seinelength Eigenschaft ist0), wurden keine Übereinstimmungen gefunden.

Andernfalls können Sie die Standard-Array-Notation verwenden, um auf den Inhalt der Liste zuzugreifen. Siekönnen jede übliche Schleifenanweisung verwenden, wie zum Beispiel:

const highlightedItems = userList.querySelectorAll(".highlighted");highlightedItems.forEach((userItem) => {  deleteUser(userItem);});

Attributwerte maskieren

Dieses Beispiel zeigt, dass wir, wenn ein HTML-Dokument eineid enthält, die kein gültigerCSS-Bezeichner ist, den Attributwert maskieren müssen, bevor er inquerySelectorAll() verwendet wird.

HTML

Im folgenden Code hat ein<div> Element eineid von"this?element", was kein gültiger CSS-Bezeichner ist, da das"?"-Zeichen in CSS-Bezeichnern nicht erlaubt ist.

Wir haben auch drei Buttons und ein<pre> Element zum Protokollieren von Fehlern.

<div></div><button>No escape</button><button>CSS.escape()</button><button>Manual escape</button><pre></pre>

CSS

div {  background-color: blue;  margin: 1rem 0;  height: 100px;  width: 200px;}

JavaScript

Alle drei Buttons versuchen, wenn sie geklickt werden, das<div> auszuwählen und dann seine Hintergrundfarbe auf einen zufälligen Wert zu setzen.

• Der erste Button verwendet den"this?element" Wert direkt.
• Der zweite Button maskiert den Wert mitCSS.escape().
• Der dritte Button maskiert das"?" Zeichen explizit mit einem Backslash. Beachten Sie, dass wir auch den Backslash selbst mit einem weiteren Backslash maskieren müssen, wie:"\\?".

const log = document.querySelector("#log");function random(number) {  return Math.floor(Math.random() * number);}function setBackgroundColor(id) {  log.textContent = "";  try {    const elements = document.querySelectorAll(`#${id}`);    const randomColor = `rgb(${random(255)} ${random(255)} ${random(255)})`;    elements[0].style.backgroundColor = randomColor;  } catch (e) {    log.textContent = e;  }}document.querySelector("#no-escape").addEventListener("click", () => {  setBackgroundColor("this?element");});document.querySelector("#css-escape").addEventListener("click", () => {  setBackgroundColor(CSS.escape("this?element"));});document.querySelector("#manual-escape").addEventListener("click", () => {  setBackgroundColor("this\\?element");});

Ergebnis

Ein Klick auf den ersten Button erzeugt einen Fehler, während der zweite und dritte Button ordnungsgemäß funktionieren.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Selektion und Traversierung im DOM-Baum
• Attributselektoren im CSS-Leitfaden
• Attributselektoren im MDN Learning-Bereich
• Element.querySelector() undElement.querySelectorAll()
• Document.querySelector()
• DocumentFragment.querySelector() undDocumentFragment.querySelectorAll()