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 |