Frontend Academy · Lekcja

querySelector i querySelectorAll

Wyszukuj pojedyncze i wiele elementów za pomocą ciągów selektorów CSS oraz poznaj różnicę między NodeList i HTMLCollection.

querySelector i querySelectorAll to bezpłatna lekcja Frontend 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Czym jest DOM?

Document Object Model to drzewo obiektów JavaScript reprezentujące strukturę HTML. JavaScript korzysta z DOM, aby odczytywać, modyfikować, dodawać i usuwać elementy, dzięki czemu strony internetowe stają się dynamiczne.

getElementById

Klasyczny selektor. document.getElementById('myId') zwraca element o podanym identyfikatorze albo null, jeśli nie zostanie on znaleziony. Jest szybki, ale działa wyłącznie z identyfikatorami.

const header = document.getElementById('site-header');
if (header) {
  header.style.backgroundColor = 'navy';
}

querySelector — pojedynczy element

document.querySelector(cssSelector) zwraca pierwszy element pasujący do dowolnego selektora CSS. Zwraca null, jeśli nie znajdzie żadnego elementu. Jest bardziej elastyczny niż getElementById.

const btn = document.querySelector('.btn-primary');
const input = document.querySelector('input[type="email"]');
const hero = document.querySelector('#hero h1');

querySelectorAll — wiele elementów

document.querySelectorAll(cssSelector) zwraca statyczny NodeList zawierający wszystkie pasujące elementy. Nie jest to żywa tablica — należy go iterować. Aby używać metod tablicowych, należy zastosować Array.from() lub operator spread.

const cards = document.querySelectorAll('.card');
cards.forEach(card => card.classList.add('loaded'));

// Convert to array for array methods:
const hrefs = Array.from(document.querySelectorAll('a')).map(a => a.href);

Zapytania ograniczone zakresem

Można wywołać querySelector na dowolnym elemencie, aby wyszukiwać tylko w obrębie jego poddrzewa, a nie całego dokumentu. Jest to wydajniejsze i zapobiega przypadkowemu wybraniu elementów z innych części strony.

const nav = document.querySelector('#main-nav');
const links = nav.querySelectorAll('a'); // only links inside #main-nav

NodeList a HTMLCollection

NodeList (z querySelectorAll) jest statyczny — odzwierciedla stan DOM w chwili wykonania zapytania. HTMLCollection (z getElementsByClassName itp.) jest żywy — aktualizuje się automatycznie wraz ze zmianami w DOM. Oba obiekty przypominają tablice, ale nie są tablicami.

Przechodzenie po DOM

Z dowolnego elementu można przejść do: element.parentElement, element.children, element.firstElementChild, element.lastElementChild, element.nextElementSibling, element.previousElementSibling.

const list = document.querySelector('ul');
console.log(list.children.length);       // number of li elements
console.log(list.firstElementChild);     // first li
console.log(list.parentElement);         // ul's parent

Sprawdzanie, czy element istnieje

Przed użyciem wyniku querySelector należy zawsze sprawdzić, czy nie zwrócił wartości null, szczególnie w przypadku elementów, które mogą nie występować na każdej stronie.

const modal = document.querySelector('.modal');
if (modal) {
  // safe to use modal here
  modal.classList.add('open');
}

matches() i closest()

element.matches(selector) zwraca true, jeśli element pasuje do selektora. element.closest(selector) przechodzi w górę drzewa DOM i zwraca pierwszego przodka pasującego do selektora albo null.

const item = document.querySelector('.list-item');
console.log(item.matches('.active'));     // false

// Event delegation: find the clicked card
document.addEventListener('click', (e) => {
  const card = e.target.closest('.card');
  if (card) card.classList.toggle('selected');
});

contains()

parentElement.contains(childElement) zwraca true, jeśli element potomny znajduje się wewnątrz elementu nadrzędnego (lub jest nim samym). Jest to przydatne do sprawdzania, czy kliknięcie nastąpiło poza oknem modalnym lub menu rozwijanym.

document.addEventListener('click', (e) => {
  const menu = document.querySelector('.dropdown-menu');
  if (!menu.contains(e.target)) {
    menu.hidden = true; // clicked outside
  }
});

Wydajność: ograniczanie liczby zapytań do DOM

Zapytania do DOM nie są darmowe. Należy zapisać wynik w zmiennej zamiast wielokrotnie wywoływać querySelector. W pętlach należy grupować odczyty z DOM, a następnie zapisy do DOM, aby uniknąć niepotrzebnego przeliczania układu.

// Bad — queries DOM in every iteration:
for (let i = 0; i < 100; i++) {
  document.querySelector('#counter').textContent = i;
}

// Good — cache the element:
const counter = document.querySelector('#counter');
for (let i = 0; i < 100; i++) counter.textContent = i;

Szybkie sprawdzenie

Która metoda zwraca statyczny NodeList zawierający wszystkie pasujące elementy?

Podsumowanie: wybieranie elementów DOM

querySelector zwraca pierwsze dopasowanie. querySelectorAll zwraca wszystkie dopasowania jako statyczny NodeList. Dla większej wydajności należy ograniczać zapytania do poddrzewa. Należy zapisywać wyniki zapytań w pamięci. closest() służy do delegowania zdarzeń. Przed użyciem wyszukanego elementu należy zawsze sprawdzić, czy nie ma wartości null.

Często zadawane pytania

Czy lekcja „querySelector i querySelectorAll” jest bezpłatna?

Tak — pełny tekst „querySelector i querySelectorAll” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „querySelector i querySelectorAll”?

Wyszukuj pojedyncze i wiele elementów za pomocą ciągów selektorów CSS oraz poznaj różnicę między NodeList i HTMLCollection. Ćwiczysz Frontend 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ąć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend 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 „querySelector i querySelectorAll”?

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 Frontend Academy?

Tak. Każda lekcja Frontend 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

querySelector i querySelectorAll
addEventListener i obiekt Event
Zmiana treści: textContent, innerHTML, classList
Tworzenie i dołączanie elementów

← Powrót do Frontend Academy