Signatur
querySelector(selectors)
Beschreibung
Die Methode querySelector() des Document-Interfaces gibt das erste Element innerhalb des Dokuments zurück, das dem angegebenen CSS-Selektor oder der angegebenen Gruppe von CSS-Selektoren entspricht. Werden keine Übereinstimmungen gefunden, wird null zurückgegeben.
Die Suche erfolgt mittels Tiefendurchlauf in Pre-Order-Reihenfolge über die Knoten des Dokuments, beginnend mit dem ersten Element im Markup des Dokuments und iteriert durch aufeinanderfolgende Knoten in der Reihenfolge der Anzahl ihrer Kindknoten.
Wenn der angegebene Selektor auf eine ID passt, die im Dokument fälschlicherweise mehrfach verwendet wird, wird das erste Element mit dieser ID zurückgegeben.
CSS-Pseudoelemente liefern niemals Elemente zurück.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $selectors Pflicht | string | — | Ein String, der einen oder mehrere zu suchende Selektoren enthält. Dieser String muss ein gültiger CSS-Selektor-String sein; ist er das nicht, wird eine SyntaxError-Exception geworfen. Beachte, dass die HTML-Spezifikation nicht verlangt, dass Attributwerte gültige CSS-Identifier sind. Wenn ein class- oder id-Attributwert kein gültiger CSS-Identifier ist, muss er vor der Verwendung in einem Selektor escaped werden, entweder durch Aufruf von CSS.escape() auf dem Wert oder durch eine der Techniken zum Escapen von Zeichen. |
Rückgabewert
Typ
Element | null
Beschreibung
Ein Element-Objekt, das das erste Element im Dokument repräsentiert, das der angegebenen Menge von CSS-Selektoren entspricht, oder null, falls es keine Übereinstimmungen gibt.
Beispiele
Das erste Element mit einer bestimmten Klasse finden
const el = document.querySelector(".myclass");Komplexe Selektoren
const el = document.querySelector("div.user-panel.main input[name='login']");Negation
const el = document.querySelector(
"div.user-panel:not(.main) input[name='login']",
);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 element = document.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
Wird ein
SyntaxError (DOMException) geworfen, wenn die Syntax der angegebenen selectors ungültig ist. Wenn eine Liste aller passenden Elemente benötigt wird, sollte stattdessen querySelectorAll() verwendet werden.