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 Juli 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
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:
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:
<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
| Specification |
|---|
| DOM # ref-for-dom-parentnode-queryselector① |
Browser-Kompatibilität
Loading…
Siehe auch
- Das
DocumentFragment-Interface, zu dem es gehört.