files/pl/web/api/document/queryselector/index.html


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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

---
title: Document.querySelector()
slug: Web/API/Document/querySelector
tags:
  - API
  - DOM
  - Metodă
  - Referencje
  - Selektory
translation_of: Web/API/Document/querySelector
---
<div>{{ ApiRef("DOM") }}</div>

<p>Funkcja zwraca pierwszy element wewnątrz dokumentu, który pasuje do podanego selektora lub grupy selektorów.</p>

<h2 id="Syntax" name="Syntax">Składnia</h2>

<pre class="brush: js">element = document.querySelector(selectors);
</pre>

<p>gdzie</p>

<ul>
 <li><code>element</code> jest obiektem typu <a href="/en-US/docs/DOM/element" title="en-US/docs/DOM/element">element</a>.</li>
 <li><code>selectors</code> jest łańcuchem znaków (<code>string</code>) zawierającym jeden lub więcej <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selektorów CSS</a> oddzielonych przecinkami.</li>
</ul>

<h2 id="Example" name="Example">Przykład</h2>

<p>W tym przykladzie zostaje zwrócony pierwszy element w dokumencie o klasie "<code style="font-style: normal;">myclass</code>":</p>

<pre class="brush: js">var el = document.querySelector(".myclass");
</pre>

<h2 id="ExamplePowerful" name="ExamplePowerful">Przykład: Powerful</h2>

<p><em>Selectory</em> mogą być naprawdę potężne, jak pokazano na poniższym przykładzie. Pierwszy element <code>&lt;input name="login"/&gt;</code> wewnątrz <code>&lt;div class="user-panel main"&gt;</code> w dokumencie zostaje zwrócony:</p>

<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name='login']");
</pre>

<h2 id="Notes" name="Notes">Uwagi</h2>

<p>Jeśli nie znaleziono dopasowań - zwraca null. W przeciwnym wypadku zwraca pierwszy pasujący element.</p>

<p>Jeśli selektor zawiera ID i to ID zostaje wielokrotnie błędnie użyte w dokumencie, zwracany jest pierwszy pasujący element.</p>

<p>Gdy podana grupa selektorów jest nieprawidłowa, zwrócony zostaje wyjątek <span style="font-family: courier,andale mono,monospace;">SYNTAX_ERR.</span></p>

<p><code>querySelector()</code> został wprowadzony w API Selektorów.</p>

<p>Przekazany do funkcji <code>querySelector</code> łańcuch znaków (<code>string</code>) musi być zgodny ze składnią CSS.</p>

<p>Zgodnie z <a href="http://www.w3.org/TR/selectors-api/#grammar">API Selektorów</a> pseudoklasy CSS nigdy nie zwrócą żadnego elementu.</p>

<p><span style="line-height: 22.0080013275147px;">Aby użyć ID lub selektorów niezgodnych ze składnią CSS (</span>np. ze względu na niewłaściwe użycie dwukropka czy spacji<span style="line-height: 22.0080013275147px;">) należy poprzedzić niezgodny znak ukośnikiem wstecznym (backslash). </span>Z racji, że w JavaScript backslash jest używany jako znak ucieczki chcąc użyć go w stringu należy wpisać go podwójnie(jeden dla stringa JavaScriptu i drugi raz dla querySelector):</p>

<pre class="brush: html">&lt;div id="foo\bar"&gt;&lt;/div&gt;
&lt;div id="foo:bar"&gt;&lt;/div&gt;

&lt;script&gt;
  console.log('#foo\bar')               // "#fooar"
  document.querySelector('#foo\bar')    // Nie pasuje do żadnego elementu

  console.log('#foo\\bar')              // "#foo\bar"
  console.log('#foo\\\\bar')            // "#foo\\bar"
  document.querySelector('#foo\\\\bar') // Odnosi się do pierwszego diva

  document.querySelector('#foo:bar')    // Nie pasuje do żadnego elementu
  document.querySelector('#foo\\:bar')  // Odnosi się do drugiego diva
&lt;/script&gt;
</pre>

<h2 id="Specyfikacje">Specyfikacje</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specyfikacja</th>
   <th scope="col">Status</th>
   <th scope="col">Komentarz</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>Definicja wstępna</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Zgodność z przeglądarkami</h2>

<p>{{CompatibilityTable()}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Cecha</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Wsparcie podstawowe</td>
   <td>1</td>
   <td>3.5 (1.9.1)<br>
    {{bug(416317)}}</td>
   <td>8</td>
   <td>10</td>
   <td>3.2 (525.3)<br>
    {{Webkitbug("16587")}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Cecha</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Wsparcie podstawowe</td>
   <td>2.1</td>
   <td>yes</td>
   <td>9</td>
   <td>10.0</td>
   <td>3.2</td>
  </tr>
 </tbody>
</table>
</div>


<h2 id="See_also" name="See_also">Zobacz także</h2>


<ul>
 <li>{{domxref("document.querySelectorAll()")}}</li>
 <li>{{domxref("element.querySelector()")}}</li>
 <li>{{domxref("element.querySelectorAll()")}}</li>
 <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Przykłady kodu z użyciem querySelector</a></li>
</ul>