We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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,