Document.querySelector()

Funkcja zwraca pierwszy element wewnątrz dokumentu( węzły drzewa dokumentu są znajdowane przy użyciu przeszukiwania wgłąb, metodą przejścia pre-order) który pasuje do podanej grupy selektorów.

Składnia

element = document.querySelector(selectors);

gdzie

• element jest obiektem typu element.
• selectors jest łańcuchem znaków zawierającym jeden lub więcej  selektorów CSS oddzielonych przecinkami.

Przykład

W tym przykladzie zostanie zwrócony pierwszy element w dokumencie zawierający klasę "myclass":

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

Uwagi

Gdy nie znaleziono dopasowań, zwraca null. W przeciwnym wypadku zwraca pierwszy pasujący element.

Jeśli selektor zawiera ID, podczas gdy to ID jest błędnie użyte wielokrotnie w dokumencie, zwracany jest pierwszy pasujący element.

Gdy podana grupa selektorów jest nieprawidłowa, rzucany jest wyjątek SYNTAX_ERR.

querySelector() został wprowadzony w API Selektorów.

Przekazany do funkcji querySelector  łańcuch znaków 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(), należy poprzedzić niezgodny znak backslashem. Aby użyć znaku backslasha, należy go poprzedzić drugim backslashem:

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log('#foo\bar')               // "#fooar"
  document.querySelector('#foo\bar')    // Does not match anything

  console.log('#foo\\bar')              // "#foo\bar"
  console.log('#foo\\\\bar')            // "#foo\\bar"
  document.querySelector('#foo\\\\bar') // Match the first div

  document.querySelector('#foo:bar')    // Does not match anything
  document.querySelector('#foo\\:bar')  // Match the second div
</script>

Zgodność z przeglądarkami

Specyfikacje

• API Selektorów

Zobacz także

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