Element.querySelector() — Methode · JavaScript-Referenz

Signatur

querySelector(selectors)

Beschreibung

Die Methode querySelector() des Element-Interfaces gibt das erste Element zurück, das ein Nachfahre des Elements ist, auf dem sie aufgerufen wird, und mit der angegebenen Selektorgruppe übereinstimmt.

Parameter

Name	Typ	Default	Beschreibung
$selectors Pflicht	string	—	Ein String, der einen oder mehrere zu vergleichende Selektoren enthält. Dieser String muss ein gültiger CSS-Selektor-String sein; andernfalls wird eine `SyntaxError`-Ausnahme ausgelöst. Beachten Sie, dass die HTML-Spezifikation nicht verlangt, dass Attributwerte gültige CSS-Identifier sind. Ist ein `class`- oder `id`-Attributwert kein gültiger CSS-Identifier, so muss er vor der Verwendung in einem Selektor escaped werden – entweder durch Aufruf von `CSS.escape()` auf dem Wert oder mit einer der Techniken aus „Escaping characters“.

Rückgabewert

Typ

Element | null

Beschreibung

Das erste Nachfahren-Element von baseElement, das mit der angegebenen selectors-Gruppe übereinstimmt. Beim Matching wird die gesamte Elementhierarchie berücksichtigt, auch außerhalb von baseElement und dessen Nachfahren; das heißt, selectors wird zunächst auf das gesamte Dokument angewendet, nicht auf baseElement, um eine anfängliche Liste möglicher Elemente zu erzeugen. Die resultierenden Elemente werden dann darauf geprüft, ob sie Nachfahren von baseElement sind. Der erste Treffer aus den verbleibenden Elementen wird von querySelector() zurückgegeben. Werden keine Treffer gefunden, ist der Rückgabewert null.

Beispiele

Ein bestimmtes Element mit spezifischen Attributwerten finden

const el = document.body.querySelector(
  "style[type='text/css'], style:not([type])",
);

Direkte Nachfahren mit der :scope-Pseudoklasse ermitteln – JavaScript

const parentElement = document.querySelector("#parent");
let allChildren = parentElement.querySelectorAll(":scope > span");
allChildren.forEach((item) => item.classList.add("red"));

Die gesamte Hierarchie zählt – JavaScript

const baseElement = document.querySelector("p");
document.getElementById("output").textContent =
  baseElement.querySelector("div span").textContent;

Attributwerte escapen – 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 element = container.querySelector(`#${id}`);
    const randomColor = `rgb(${random(255)} ${random(255)} ${random(255)})`;
    element.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

Ausnahmen: SyntaxError (DOMException) – wird ausgelöst, wenn die angegebenen selectors ungültig sind.

Siehe auch

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