Document.querySelector()
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.selectors
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
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 |