Document.querySelector()

Funkcja zwraca pierwszy element wewn膮trz dokumentu, kt贸ry pasuje do podanego selektora lub grupy selektor贸w.

Sk艂adnia

element = document.querySelector(selectors);

gdzie

  • element jest obiektem typu element.
  • selectors jest 艂a艅cuchem znak贸w (string) zawieraj膮cym jeden lub wi臋cej selektor贸w CSS oddzielonych przecinkami.

Przyk艂ad

W tym przykladzie zostaje zwr贸cony pierwszy element w dokumencie o klasie "myclass":

var el = document.querySelector(".myclass");

Przyk艂ad: Powerful

Selectory mog膮 by膰 naprawd臋 pot臋偶ne, jak pokazano na poni偶szym przyk艂adzie. Pierwszy element <input name="login"/> wewn膮trz <div class="user-panel main"> w dokumencie zostaje zwr贸cony:

var el = document.querySelector("div.user-panel.main input[name='login']");

Uwagi

Je艣li nie znaleziono dopasowa艅 - zwraca null. W przeciwnym wypadku zwraca pierwszy pasuj膮cy element.

Je艣li selektor zawiera ID i to ID zostaje wielokrotnie b艂臋dnie u偶yte w dokumencie, zwracany jest pierwszy pasuj膮cy element.

Gdy podana grupa selektor贸w jest nieprawid艂owa, zwr贸cony zostaje wyj膮tek SYNTAX_ERR.

querySelector() zosta艂 wprowadzony w API Selektor贸w.

Przekazany do funkcji querySelector 艂a艅cuch znak贸w (string) musi by膰 zgodny ze sk艂adni膮 CSS.

Zgodnie z API Selektor贸w pseudoklasy CSS nigdy nie zwr贸c膮 偶adnego elementu.

Aby u偶y膰 ID lub selektor贸w niezgodnych ze sk艂adni膮 CSS (np. ze wzgl臋du na niew艂a艣ciwe u偶ycie dwukropka czy spacji) nale偶y poprzedzi膰 niezgodny znak uko艣nikiem wstecznym (backslash). 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):

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

Specyfikacje

Specyfikacja Status Komentarz
Selectors API Level 2
The definition of 'document.querySelector()' in that specification.
Obsolete
Selectors API Level 1
The definition of 'document.querySelector()' in that specification.
Obsolete Definicja wst臋pna

Zgodno艣膰 z przegl膮darkami

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Cecha Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Wsparcie podstawowe 1 3.5 (1.9.1)
b艂膮d 416317
8 10 3.2 (525.3)
WebKit b艂膮d 16587
Cecha Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Wsparcie podstawowe 2.1 yes 9 10.0 3.2

Zobacz tak偶e