Document.querySelector()

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

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.

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

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

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']");

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>

• document.querySelectorAll()
• element.querySelector()
• element.querySelectorAll()
• Przykłady kodu z użyciem querySelector