0Pricing
JavaScript Academy · Lekcja

Wybieranie elementów za pomocą querySelector

Proszę wyszukiwać elementy za pomocą selektorów CSS.

Wybieranie elementów za pomocą querySelector to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Poznaj querySelector

querySelector zwraca pierwszy element pasujący do selektora CSS albo null, jeśli nie znaleziono dopasowania. Jest dostępny na obiekcie document oraz na każdym elemencie.

const title = document.querySelector("h1");
console.log(title.textContent);

Działa dowolny selektor CSS

Zaletą querySelector jest to, że akceptuje te same selektory, których używasz w CSS: tagi, klasy, identyfikatory, atrybuty i ich kombinacje.

document.querySelector("#main");      // by id
document.querySelector(".card");      // by class
document.querySelector("input[type=email]"); // by attribute

querySelectorAll

querySelectorAll zwraca wszystkie pasujące elementy jako statyczny obiekt NodeList. Nawet przy braku dopasowań zwraca pustą listę (nigdy null).

const cards = document.querySelectorAll(".card");
console.log(cards.length);

Iterowanie po wynikach

Obiekt NodeList zwrócony przez querySelectorAll obsługuje bezpośrednio metodę forEach, dzięki czemu iterowanie jest proste.

const items = document.querySelectorAll("li");
items.forEach((li) => {
  console.log(li.textContent);
});

Selektory elementów potomnych

Możesz wybierać zagnieżdżone elementy za pomocą spacji (selektor elementów potomnych), tak samo jak w CSS. Ten zapis znajduje każdy element .price wewnątrz elementu .product.

const prices = document.querySelectorAll(".product .price");

Łączenie klas

Połączenie klas bez spacji oznacza, że element musi mieć wszystkie z nich. W tym przykładzie wybieramy przyciski, które są jednocześnie główne i duże.

const btn = document.querySelector("button.primary.large");

Zapytania w określonym zakresie

Wywołanie querySelector na elemencie (a nie na obiekcie document) przeszukuje tylko jego zawartość. Dzięki temu wyszukiwanie pozostaje lokalne i szybkie.

const form = document.querySelector("#signup");
const emailField = form.querySelector("input[name=email]");

Pseudoklasy

Działają również pseudoklasy strukturalne, takie jak :first-child i :nth-of-type.

document.querySelector("li:first-child");
document.querySelectorAll("tr:nth-of-type(even)");

Obsługa braku dopasowania

Ponieważ querySelector może zwrócić null, przed użyciem wyniku sprawdź jego wartość, aby uniknąć błędu TypeError.

const banner = document.querySelector(".banner");
if (banner) {
  banner.classList.add("hidden");
}

Selektory atrybutów

Selektory atrybutów pozwalają wybierać elementy na podstawie atrybutów danych, co świetnie sprawdza się przy odwoływaniu się do elementów bez polegania na klasach.

const widget = document.querySelector("[data-role=widget]");
const openTabs = document.querySelectorAll("[aria-expanded=true]");

querySelector a starsze API

querySelector jest bardziej elastyczny niż getElementById, ponieważ akceptuje dowolny selektor, ale wyszukiwanie po identyfikatorze jest nadal nieco szybsze. Używaj narzędzia odpowiedniego do danego zadania.

document.querySelector("#nav");        // flexible
document.getElementById("nav");        // fastest for ids

Szybkie sprawdzenie

Sprawdź swoją wiedzę o selektorach.

Podsumowanie

Dowiedziałeś się, że querySelector zwraca pierwsze dopasowanie (albo null), a querySelectorAll zwraca statyczny obiekt NodeList zawierający wszystkie dopasowania. Obie metody akceptują pełne selektory CSS i można ograniczyć ich działanie do elementu nadrzędnego. Korzystając z querySelector, zawsze sprawdzaj, czy wynik nie jest równy null.

Często zadawane pytania

Czy lekcja „Wybieranie elementów za pomocą querySelector” jest bezpłatna?

Tak — pełny tekst „Wybieranie elementów za pomocą querySelector” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wybieranie elementów za pomocą querySelector”?

Proszę wyszukiwać elementy za pomocą selektorów CSS. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Wybieranie elementów za pomocą querySelector”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Wybieranie elementów za pomocą querySelector
  2. getElementById i getElementsByClassName
  3. Przechodzenie między rodzicami, dziećmi i rodzeństwem
  4. NodeList a HTMLCollection
← Powrót do JavaScript Academy