Element.querySelectorAll() — Methode · JavaScript-Referenz

Signatur

querySelectorAll(selectors)

Beschreibung

Die Element-Methode querySelectorAll() gibt eine statische (nicht live) NodeList zurück, die eine Liste von Elementen darstellt, die auf die angegebene Gruppe von Selektoren passen und Nachfahren des Elements sind, auf dem die Methode aufgerufen wurde.

Parameter

Name	Typ	Default	Beschreibung
$selectors Pflicht	string	—	Ein String, der einen oder mehrere Selektoren enthält, gegen die abgeglichen werden soll. Dieser String muss ein gültiger CSS-Selektor-String sein; andernfalls wird eine `SyntaxError`-Exception geworfen. 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 den Wert oder durch eine der beschriebenen Techniken. Siehe das Beispiel zum Escapen von Attributwerten. Die Selektoren werden auf das gesamte Dokument angewendet, nicht nur auf das bestimmte Element, auf dem `querySelectorAll()` aufgerufen wird. Um den Selektor auf das Element zu beschränken, auf dem `querySelectorAll()` aufgerufen wird, fügen Sie die Pseudo-Klasse `:scope` am Anfang des Selektors ein. Siehe das Beispiel zum Selektor-Scope.

Rückgabewert

Typ

NodeList

Beschreibung

Eine nicht-live NodeList, die für jeden Nachfahren-Knoten, der auf mindestens einen der angegebenen Selektoren passt, ein Element-Objekt enthält. Die Elemente sind in Dokumentreihenfolge — das heißt Eltern vor Kindern, frühere Geschwister vor späteren Geschwistern. Hinweis: Wenn die angegebenen selectors ein CSS-Pseudo-Element enthalten, ist die zurückgegebene Liste stets leer.

Beispiele

Alle Elemente mit einem benutzerdefinierten Datenwert abrufen (JS)

const refs = [
  ...document.querySelectorAll(`[data-name*="funnel-chart-percent"]`),
];

Eine Liste von Treffern erhalten

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

Divs mit Klasse note oder alert

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

Verschachtelte Selektion

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

iframes mit Attribut data-src

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

Listenelemente mit Attributwert

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

Selektor-Scope (JavaScript)

const subject = document.querySelector("#subject");

const select = document.querySelector("#select");
select.addEventListener("click", () => {
  const selected = subject.querySelectorAll("#outer #inner");
  output.textContent = `Selection count: ${selected.length}`;
});

const selectScope = document.querySelector("#select-scope");
selectScope.addEventListener("click", () => {
  const selected = subject.querySelectorAll(":scope #outer #inner");
  output.textContent = `Selection count: ${selected.length}`;
});

Escapen von Attributwerten (JavaScript)

const container = document.querySelector("#container");
const log = document.querySelector("#log");

function random(number) {
  return Math.floor(Math.random() * number);
}

function setBackgroundColor(id) {
  log.textContent = "";

  try {
    const elements = container.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

Exceptions: SyntaxError DOMException — Wird geworfen, wenn die Syntax des angegebenen selectors-Strings nicht gültig ist.

Hinweis: NodeList ist kein echtes Array, das heißt, es besitzt keine Array-Methoden wie slice, some, map usw. Um es in ein Array umzuwandeln, verwenden Sie Array.from(nodeList).

Siehe auch

Element.querySelector() Document.querySelector() Document.querySelectorAll() DocumentFragment.querySelector() DocumentFragment.querySelectorAll() ElementInternals.setFormValue() new Worker()

← Vorheriger Eintrag Element.querySelector() Nächster Eintrag → Element.releasePointerCapture()