DieDocumentFragment.querySelector() Methode gibt das erste Element innerhalb desDocumentFragment zurück, das der angegebenen Gruppe von Selektoren entspricht, odernull, wenn keine Übereinstimmungen gefunden werden (unter Verwendung einer tiefenorientierten Vorordnungstraversierung der Knoten des Dokuments).

Wenn der Selektor mit einer ID übereinstimmt und diese ID irrtümlicherweise mehrmals im Dokument verwendet wird, gibt sie das erste übereinstimmende Element zurück.

Wenn die im Parameter angegebenen Selektoren ungültig sind, wird einDOMException mit einemSYNTAX_ERR Wert ausgelöst.

Syntax

querySelector(selectors)

Parameter

selectors

Ein String, der einen oder mehrere durch Kommas getrennte CSS-Selektoren enthält.

Rückgabewert

EinElement Objekt, das das erste Element im Dokument darstellt, das mit dem angegebenen Satz vonCSS-Selektoren übereinstimmt, odernull, wenn es keine Übereinstimmungen gibt.

Beispiele

Einfaches Beispiel

In diesem einfachen Beispiel wird das erste Element imDocumentFragment mit der Klassemyclass zurückgegeben:

const el = documentfragment.querySelector(".myclass");

CSS-Syntax und das Argument der Methode

Das anquerySelector übergebene String-Argument muss der CSS-Syntax folgen. Um eine Übereinstimmung mit IDs oder Selektoren zu erzielen, die der CSS-Syntax nicht folgen (beispielsweise durch unangemessene Verwendung von Semikolon oder Leerzeichen), ist es erforderlich, das falsche Zeichen mit einem doppelten Backslash zu maskieren:

<div></div><div></div>

document.querySelector("#foo\bar"); // Does not match anythingdocument.querySelector("#foo\\\\bar"); // Match the first divdocument.querySelector("#foo:bar"); // Does not match anythingdocument.querySelector("#foo\\:bar"); // Match the second div

Spezifikationen

Browser-Kompatibilität

Siehe auch

• DasDocumentFragment Interface, zu dem es gehört.