document.
Zwraca pierwszy element pasujący do selektora CSS albo null, gdy nic nie pasuje.
- Zwraca
- Pierwszy pasujący element albo
null.
Przykład
#const first = document.querySelector('.task')
const todo = document.querySelector('.task:not(.done)')
const last = document.querySelector('.tasks li:last-child')
console.log(first)
console.log(todo.textContent)
console.log(last.textContent)
console.log(document.querySelector('.missing'))Definicja i zastosowanie
#Metoda querySelector() przeszukuje dokument i zwraca pierwszy element, który pasuje do podanego selektora CSS. Możesz użyć dowolnego selektora znanego z arkuszy stylów: "#menu", ".card", "nav a", "input[type=email]" czy "li:last-child".
Jeśli żaden element nie pasuje, metoda zwraca null. Odczyt właściwości z null rzuca błąd, dlatego przy elementach, których może nie być na stronie, sprawdź wynik albo użyj operatora ?..
Metodę można wywołać nie tylko na document, ale też na dowolnym elemencie. Wtedy szuka tylko w jego wnętrzu, co przydaje się przy powtarzających się fragmentach strony, takich jak karty kursów. Do pobrania wszystkich pasujących elementów służy querySelectorAll().
Składnia
#document.querySelector(selectors)
element.querySelector(selectors)Parametry
#selectors
napis
Selektor CSS, np."#menu"albo".card h3". Kilka selektorów oddzielasz przecinkami.
Więcej przykładów
#const cssCard = document.querySelector('#css-course')
const price = cssCard.querySelector('.price')
console.log(cssCard)
console.log(price.textContent)const banner = document.querySelector('.promo-banner')
console.log(banner?.textContent ?? 'Brak banera na stronie')
console.log(document.querySelector('#save').textContent)Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Sprawdzaj wynik przed użyciem albo używaj
?.. Literówka w selektorze kończy się błędem „Cannot read properties of null”. - Szukaj wewnątrz konkretnego elementu (
card.querySelector()), gdy na stronie jest wiele podobnych fragmentów. - Identyfikator zaczynający się od cyfry wymaga w selektorze specjalnego zapisu. W takim przypadku prościej użyć
getElementById().
Powiązane hasła
#- document.querySelectorAll()Zwraca statyczną listę (NodeList) wszystkich elementów pasujących do selektora CSS.
- document.getElementById()Zwraca element o podanym identyfikatorze (atrybucie id) albo null, gdy go nie ma.
- Element.closest()Zwraca najbliższego przodka (lub sam element) pasującego do selektora CSS albo null.
- ?.Operator ?. (optional chaining) bezpiecznie odczytuje właściwość. Gdy obiekt to null lub undefined, zwraca undefined zamiast błędu.
- Node.textContentOdczytuje lub ustawia cały tekst elementu, bez znaczników HTML.
Widzisz błąd albo brakuje przykładu? Napisz do nas.