DocumentFragment: querySelector() Methode
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die DocumentFragment.querySelector() Methode gibt das erste Element innerhalb des DocumentFragment zurück, das der angegebenen Gruppe von Selektoren entspricht, oder null, 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 ein DOMException mit einem SYNTAX_ERR Wert ausgelöst.
Syntax
querySelector(selectors)
Parameter
selectors-
Ein String, der einen oder mehrere durch Kommas getrennte CSS-Selektoren enthält.
Rückgabewert
Ein Element Objekt, das das erste Element im Dokument darstellt, das mit dem angegebenen Satz von CSS-Selektoren übereinstimmt, oder null, wenn es keine Übereinstimmungen gibt.
Beispiele
Einfaches Beispiel
In diesem einfachen Beispiel wird das erste Element im DocumentFragment mit der Klasse myclass zurückgegeben:
const el = documentfragment.querySelector(".myclass");
CSS-Syntax und das Argument der Methode
Das an querySelector ü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 id="foo\bar"></div>
<div id="foo:bar"></div>
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
| Spezifikation |
|---|
| DOM # ref-for-dom-parentnode-queryselector① |
Browser-Kompatibilität
Siehe auch
- Das
DocumentFragmentInterface, zu dem es gehört.