MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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.
  • selector 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.
Working Draft  
Selectors API Level 1
The definition of 'document.querySelector()' in that specification.
Recommendation Definicja wstępna

Zgodność z przeglądarkami

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

Autorzy i etykiety dokumentu

 Autorzy tej strony: drm404, wkamel
 Ostatnia aktualizacja: drm404,