Document.querySelector()

To tłumaczenie jest niekompletne. Pomóż przetłumaczyć ten artykuł z języka angielskiego.

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1 3.5 (1.9.1)
błąd 416317
8 10 3.2 (525.3)
WebKit błąd 16587
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 yes 9 10.0 3.2

Specyfikacje

Zobacz także

Autorzy i etykiety dokumentu

 Autorzy tej strony: wkamel
 Ostatnia aktualizacja: wkamel,