Document.querySelectorAll() — Methode · JavaScript-Referenz

Signatur

querySelectorAll(selectors)

Beschreibung

Die Methode querySelectorAll() des Document-Objekts gibt eine statische (nicht live) NodeList zurück, die eine Liste der Elemente des Dokuments repräsentiert, die auf die angegebene Gruppe von Selektoren passen.

Parameter

Name	Typ	Default	Beschreibung
$selectors Pflicht	string	—	Eine Zeichenkette, die einen oder mehrere zu vergleichende Selektoren enthält. Diese Zeichenkette muss ein gültiger CSS-Selektor-String sein; andernfalls wird eine SyntaxError-Ausnahme geworfen.

Rückgabewert

Typ

NodeList

Beschreibung

Eine nicht-live NodeList, die für jedes Element, das auf mindestens einen der angegebenen Selektoren passt, ein Element-Objekt enthält, oder eine leere NodeList, falls es keine Treffer gibt. Die Elemente sind in Dokumentreihenfolge – also Eltern vor Kindern, frühere Geschwister vor späteren Geschwistern.

Beispiele

Eine Liste der Treffer erhalten

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

Alle div-Elemente mit Klasse note oder alert

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

Verschachtelte Selektoren

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

Attribut-Selektor

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

Attribut-Selektor mit Wert

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

Zugriff auf die Treffer

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

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

Escaping von Attributwerten – JavaScript

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");
});

// Wichtig · Fallstricke

Hinweis: Wenn die angegebenen selectors ein CSS-Pseudo-Element enthalten, ist die zurückgegebene Liste immer leer.

Beachten Sie, dass die HTML-Spezifikation nicht verlangt, dass Attributwerte gültige CSS-Bezeichner sind. Wenn ein class- oder id-Attributwert kein gültiger CSS-Bezeichner ist, müssen Sie ihn vor der Verwendung in einem Selektor escapen, entweder durch Aufruf von CSS.escape() auf dem Wert oder mit einer der in „Escaping characters“ beschriebenen Techniken.

Ausnahme: SyntaxError (DOMException) – wird geworfen, wenn die Syntax der angegebenen selectors-Zeichenkette ungültig ist.

Siehe auch

Element.querySelector() Element.querySelectorAll() Document.querySelector() DocumentFragment.querySelector() DocumentFragment.querySelectorAll()