1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
---
title: Document.querySelector()
slug: Web/API/Document/querySelector
tags:
- API
- DOM
- Funktion
- Methode(2)
- Méthode
- Referenz
- Selektor
- Selektoren
translation_of: Web/API/Document/querySelector
---
<div>{{ApiRef("DOM")}}</div>
<p>Die Methode <code><strong>querySelector()</strong></code> von {{domxref("Document")}} gibt das erste {{domxref("Element")}} innerhalb eines Dokuments zurück, welches dem angegebenen Selektor bzw. Selektoren entspricht. Wurden keine Übereinstimmungen gefunden wird <code>null</code> zurückgegeben.</p>
<div class="blockIndicator note">
<p><strong>Hinweis:</strong> Der Abgleich erfolgt indem sämtliche Knoten des Dokuments und deren Unterknoten der Reihe nach mittels Tiefensuche in Hauptreihenfolge (<em>depth-first pre-order</em>) durchlaufen werden.</p>
</div>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox"><var>element</var> = document.querySelector(<var>selectors</var>);
</pre>
<h3 id="Parameter">Parameter</h3>
<dl>
<dt><code>selectors</code></dt>
<dd>Ein {{domxref("DOMString")}} mit einem oder mehreren Selektoren die abgeblichen werden sollen. Dieser String muss ein gültiger CSS-Selektor-String sein. Ist dies nicht der Fall, wird eine <code>SYNTAX_ERR</code> Exception ausgelöst. Weitere Informationen zu Selektoren und deren Verwaltung finden Sie unter <a href="/de/docs/Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln">DOM Elemente mittels Selektoren ermitteln</a>.</dd>
</dl>
<div class="note">
<p><strong>Hinweis:</strong> Zeichen, die nicht zur Standard-CSS-Syntax gehören, müssen mit einem Backslash-Zeichen maskiert werden. Da JavaScript auch Backslash-Escape-Anweisungen verwendet, müssen Sie beim Schreiben von String-Literalen mit diesen Zeichen besonders vorsichtig sein. Weitere Informationen finden Sie unter {{anch("Sonderzeichen maskieren")}}.</p>
</div>
<h3 id="Rückgabewert">Rückgabewert</h3>
<p>Ein {{domxref("Element")}}-Objekt, das das erste Element des Dokuments darstellt, das der angegebenen Gruppe von <a href="/de/docs/Web/CSS/CSS_Selectors">CSS-Selektoren</a> entspricht, oder <code>null</code>, wenn keine Übereinstimmungen vorhanden sind.</p>
<p>Wenn Sie eine Liste aller Elemente benötigen, die mit den angegebenen Selektoren übereinstimmen, verwenden Sie stattdessen {{domxref("document.querySelectorAll()", "querySelectorAll()")}}.</p>
<h3 id="Exceptions">Exceptions</h3>
<dl>
<dt><code>SYNTAX_ERR</code></dt>
<dd>Die Syntax der angegebenen Selektoren ist ungültig.</dd>
</dl>
<h2 id="Nutzungshinweise">Nutzungshinweise</h2>
<p>Wenn der angegebene Selektor mit einer ID übereinstimmt, die im Dokument fälschlicherweise mehrmals vorkommt, wird das erste Element mit dieser ID zurückgegeben.</p>
<p><a href="/de/docs/Web/CSS/Pseudo-elements">CSS-Pseudoelemente</a> geben niemals Elemente zurück, wie in der <a href="https://www.w3.org/TR/selectors-api/#grammar">Selektoren-API</a> angegeben.</p>
<h3 id="Sonderzeichen_maskieren">Sonderzeichen maskieren</h3>
<p>Um mit einer ID oder Selektoren abzugleichen, die nicht der Standard-CSS-Syntax entsprechen (z. B. durch einen unzulässigen Doppelpunkt oder Leerzeichen), müssen Sie das Zeichen mit einem Backslash ("<code>\</code>") maskieren. Da der Backslash selbst ebenfalls ein Maskierungszeichen in JavaScript ist, müssen Sie ihn bei der Eingabe eines Stringliterals <em>zweimal</em> maskieren (einmal für den JavaScript String und einmal für <code>querySelector()</code>):</p>
<pre class="brush: html"><div id="foo\bar"></div>
<div id="foo:bar"></div>
<script>
console.log('#foo\bar'); // "#fooar" (\b is the backspace control character)
document.querySelector('#foo\bar'); // Does not match anything
console.log('#foo\\bar'); // "#foo\bar"
console.log('#foo\\\\bar'); // "#foo\\bar"
document.querySelector('#foo\\bar'); // Match the first div
document.querySelector('#foo:bar'); // Does not match anything
document.querySelector('#foo\\:bar'); // Match the second div
</script></pre>
<h2 id="Beispiele">Beispiele</h2>
<h3 id="Erstes_Element_ermitteln_das_mit_einer_Klasse_übereinstimmt">Erstes Element ermitteln, das mit einer Klasse übereinstimmt</h3>
<p>In diesem Beispiel wird das erste Element im Dokument mit der Klasse "<code>myclass</code>" zurückgegeben:</p>
<pre class="brush: js">var el = document.querySelector(".myclass");
</pre>
<h3 id="Ein_komplexerer_Selektor">Ein komplexerer Selektor</h3>
<p>Selektoren können auch sehr mächtig sein, wie das folgende Beispiel zeigt. Hier wird das erste {{HTMLElement("input")}}-Element mit dem Namen "login" (<code><input name="login"/></code>) innerhalb eines {{HTMLElement("div")}}, dessen Klasse "user-panel main" ist (<code><div class="user-panel main"></code>), im Dokument zurückgegeben:</p>
<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name='login']");
</pre>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td>
<td>{{Spec2("Selectors API Level 2")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
<td>{{Spec2("Selectors API Level 1")}}</td>
<td>Initiale Definition</td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<div>{{Compat("api.Document.querySelector")}}</div>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/docs/Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln">DOM Elemente mittels Selektoren ermitteln</a></li>
<li>{{domxref("Element.querySelector()")}}</li>
<li>{{domxref("Document.querySelectorAll()")}}</li>
<li>{{domxref("Element.querySelectorAll()")}}</li>
<li><a href="/de/docs/Code_snippets/QuerySelector">Code-Ausschnitte für querySelector</a></li>
</ul>
|
