diff options
Diffstat (limited to 'files/pl/web/api/document/queryselector/index.html')
| -rw-r--r-- | files/pl/web/api/document/queryselector/index.html | 159 |
1 files changed, 159 insertions, 0 deletions
diff --git a/files/pl/web/api/document/queryselector/index.html b/files/pl/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..cecd7c4f14 --- /dev/null +++ b/files/pl/web/api/document/queryselector/index.html @@ -0,0 +1,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><input name="login"/></code> wewnątrz <code><div class="user-panel main"></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"><div id="foo\bar"></div> +<div id="foo:bar"></div> + +<script> + 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 +</script> +</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> |