Dokument: Methode querySelectorAll()

selectors

Ein String, der einen oder mehrere Selektoren enthält, die übereinstimmen sollen. Dieser String muss ein gültiger CSS-Selektor-String sein; wenn er es nicht ist, wird eine SyntaxError-Ausnahme ausgelöst.

Beachten Sie, dass die HTML-Spezifikation nicht vorschreibt, dass Attributwerte gültige CSS-Identifikatoren sein müssen. Wenn ein class- oder id-Attributwert kein gültiger CSS-Identifikator ist, müssen Sie ihn vor der Verwendung in einem Selektor entkommen lassen, entweder durch Aufrufen von CSS.escape() für den Wert oder durch eine der in Entkommende Zeichen beschriebenen Techniken. Siehe Entkommende Attributwerte für ein Beispiel.

Eine nicht-live NodeList, die ein Element-Objekt für jedes Element enthält, das mit mindestens einem der angegebenen Selektoren übereinstimmt, oder eine leere NodeList im Falle keiner Übereinstimmungen. Die Elemente sind in Dokumentenreihenfolge, d.h. Eltern vor Kindern, frühere Geschwister vor späteren Geschwistern.

SyntaxError DOMException

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

Um eine NodeList aller <p>-Elemente im Dokument zu erhalten:

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

Dieses Beispiel gibt eine Liste aller <div>-Elemente im Dokument zurück, die eine Klasse entweder note oder alert haben:

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

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

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

Dieses Beispiel verwendet einen Attributselektor, um eine Liste von <iframe>-Elementen im Dokument zurückzugeben, die ein Attribut mit dem Namen data-src enthalten:

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

Hier wird ein Attributselektor verwendet, um eine Liste der Listenelemente zurückzugeben, die sich in einer Liste mit der ID user-list befinden und ein data-active-Attribut mit dem Wert 1 haben:

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

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

Andernfalls können Sie die Standardarray-Notation verwenden, um auf die Inhalte der Liste zuzugreifen. Sie können jede übliche Schleifenanweisung verwenden, wie z.B.:

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

highlightedItems.forEach((userItem) => {
  deleteUser(userItem);
});

Dieses Beispiel zeigt, dass, wenn ein HTML-Dokument eine id enthält, die kein gültiger CSS-Identifikator ist, wir den Attributwert vor der Verwendung in querySelectorAll() entkommen lassen müssen.

HTML

Im folgenden Code hat ein <div>-Element eine id von "this?element", die kein gültiger CSS-Identifikator ist, da das Zeichen "?" in CSS-Identifikatoren nicht erlaubt ist.

Wir haben auch drei Schaltflächen und ein <pre>-Element zum Protokollieren von Fehlern.

<div id="this?element"></div>

<button id="no-escape">No escape</button>
<button id="css-escape">CSS.escape()</button>
<button id="manual-escape">Manual escape</button>

<pre id="log"></pre>

CSS

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

JavaScript

Alle drei Schaltflächen versuchen bei Klick, das <div> auszuwählen und dann die Hintergrundfarbe auf einen zufälligen Wert zu setzen.

• Die erste Schaltfläche verwendet den Wert "this?element" direkt.
• Die zweite Schaltfläche lässt den Wert mit CSS.escape() entkommen.
• Die dritte Schaltfläche entkommt dem "?"-Zeichen explizit mit einem Backslash. Beachten Sie, dass wir auch den Backslash selbst mit einem weiteren Backslash entkommen lassen 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

Das Klicken auf die erste Schaltfläche führt zu einem Fehler, während die zweite und dritte Schaltfläche ordnungsgemäß funktionieren.

• Auffinden von DOM-Elementen mit Selektoren
• Attributselektoren im CSS-Leitfaden
• Attributselektoren im MDN Lernbereich
• Element.querySelector() und Element.querySelectorAll()
• Document.querySelector()
• DocumentFragment.querySelector() und DocumentFragment.querySelectorAll()