---
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>