Dokument: querySelectorAll() Methode

selectors

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

Beachten Sie, dass die HTML-Spezifikation nicht erfordert, dass Attributwerte gültige CSS-Bezeichner sind. Wenn ein class oder id Attributwert kein gültiger CSS-Bezeichner ist, müssen Sie ihn escapen, bevor Sie ihn in einem Selektor verwenden, entweder indem Sie CSS.escape() auf den Wert anwenden oder eine der in Zeichen escapen beschriebenen Techniken verwenden. Siehe Attributwerte escapen für ein Beispiel.

Eine nicht-live NodeList, die ein Element Objekt für jedes Element enthält, das mindestens einem der angegebenen Selektoren entspricht, oder eine leere NodeList, falls keine Übereinstimmungen gefunden werden. Die Elemente sind in Dokumentreihenfolge — das heißt, 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 mit einer Klasse entweder note oder alert zurück:

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 der <iframe> Elemente im Dokument zurückzugeben, die ein Attribut namens data-src enthalten:

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

Hier wird ein Attributselektor verwendet, um eine Liste der Listenelemente innerhalb einer Liste mit der ID user-list zurückzugeben, die 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 wird, können Sie diese wie jedes andere Array untersuchen. Wenn das Array leer ist (das heißt, seine length-Eigenschaft ist 0), wurden keine Übereinstimmungen gefunden.

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

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-Bezeichner ist, der Attributwert escapen werden muss, bevor er in querySelectorAll() verwendet wird.

HTML

Im folgenden Code hat ein <div> Element eine id von "this?element", die kein gültiger CSS-Bezeichner ist, weil das "?"`"-Zeichen in CSS-Bezeichnern 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 beim Klicken, das <div> zu selektieren und dann seine Hintergrundfarbe auf einen zufälligen Wert zu setzen.

• Die erste Schaltfläche verwendet den "this?element"-Wert direkt.
• Die zweite Schaltfläche escapet den Wert mit CSS.escape().
• Die dritte Schaltfläche escapet das "?""-Zeichen explizit mit einem Backslash. Beachten Sie, dass wir auch den Backslash selbst escapen müssen, indem ein weiterer Backslash verwendet wird, 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 die erste Schaltfläche gibt einen Fehler, während die zweite und dritte Schaltfläche einwandfrei funktionieren.

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