DocumentFragment: querySelector() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die DocumentFragment.querySelector()-Methode gibt das erste Element zurück oder null, wenn keine Übereinstimmungen gefunden werden, innerhalb des DocumentFragment (unter Verwendung der Tiefenpriorität im Vorabreiterdurchlauf der Knotensequenz des Dokuments), das der angegebenen Gruppe von Selektoren entspricht.

Falls der Selektor einer ID entspricht und diese ID fälschlicherweise mehrmals im Dokument verwendet wird, wird das erste übereinstimmende Element zurückgegeben.

Falls die im Parameter angegebenen Selektoren ungültig sind, wird ein DOMException mit einem SYNTAX_ERR-Wert ausgelöst.

Syntax

js
querySelector(selectors)

Parameter

selectors

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

Rückgabewert

Ein Element-Objekt, das das erste Element im Dokument darstellt, das der angegebenen Gruppe von CSS-Selektoren entspricht, oder es wird null zurückgegeben, wenn keine Übereinstimmungen vorhanden sind.

Beispiele

Einfaches Beispiel

In diesem einfachen Beispiel wird das erste Element im DocumentFragment mit der Klasse myclass zurückgegeben:

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

CSS-Syntax und das Argument der Methode

Das an querySelector übergebene Zeichenkettenargument muss der CSS-Syntax entsprechen. Um IDs oder Selektoren abzugleichen, die nicht der CSS-Syntax entsprechen (zum Beispiel durch unangemessene Verwendung von Semikolon oder Leerzeichen), ist es zwingend erforderlich, das falsche Zeichen mit einem doppelten Rückstrich zu maskieren:

html
<div id="foo\bar"></div>
<div id="foo:bar"></div>
js
document.querySelector("#foo\bar"); // Does not match anything
document.querySelector("#foo\\\\bar"); // Match the first div
document.querySelector("#foo:bar"); // Does not match anything
document.querySelector("#foo\\:bar"); // Match the second div

Spezifikationen

Specification
DOM
# ref-for-dom-parentnode-queryselector①

Browser-Kompatibilität

Siehe auch