0Pricing
JavaScript Academy · Lekcja

getElementById i getElementsByClassName

Proszę używać klasycznych metod wybierania elementów.

getElementById i getElementsByClassName to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 2 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.

getElementById

getElementById zwraca pojedynczy element z pasującym atrybutem id albo null. Identyfikatory muszą być unikatowe na stronie, dlatego metoda zwraca jeden element.

const header = document.getElementById("header");
console.log(header.tagName);

Bez symbolu krzyżyka

W przeciwieństwie do selektorów CSS przekazujesz surowy identyfikator bez znaku #. Przekazanie "#header" nie znalazłoby dopasowania.

document.getElementById("menu");   // correct
document.getElementById("#menu");  // wrong, returns null

getElementsByClassName

getElementsByClassName zwraca dynamiczny obiekt HTMLCollection zawierający wszystkie elementy, które mają podaną klasę.

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

HTMLCollection jest dynamiczny

Kolekcja aktualizuje się automatycznie wraz ze zmianami w DOM. Jeśli później dodasz nowy element .card, wartość cards.length zwiększy się bez ponownego wyszukiwania.

const cards = document.getElementsByClassName("card");
// later, after appending a new .card element
// cards.length reflects the new total automatically

Indeksowanie kolekcji

Uzyskuj dostęp do elementów za pomocą indeksu. Obiekt HTMLCollection przypomina tablicę, ale nie jest prawdziwą tablicą.

const cards = document.getElementsByClassName("card");
console.log(cards[0].textContent);

Brak bezpośredniej metody forEach

Ponieważ obiekt HTMLCollection przypomina tablicę (ale nie jest tablicą), nie ma metody forEach. Najpierw przekonwertuj go albo użyj zwykłej pętli for.

const cards = document.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
  console.log(cards[i].textContent);
}

getElementsByTagName

getElementsByTagName zwraca dynamiczny obiekt HTMLCollection zawierający każdy element o podanym tagu, na przykład wszystkie akapity.

const paras = document.getElementsByTagName("p");
console.log(paras.length);

Wiele klas

Możesz przekazać kilka nazw klas rozdzielonych spacjami. Aby element został uwzględniony, musi mieć wszystkie wymienione klasy.

const items = document.getElementsByClassName("btn primary");

Zakres ograniczony do elementu

Te metody są również dostępne na elementach, a wtedy wyszukiwanie ogranicza się do elementów potomnych danego elementu.

const list = document.getElementById("todo-list");
const items = list.getElementsByClassName("done");

Konwertowanie na tablicę

Aby używać metod tablicowych, takich jak map lub filter, rozwiń kolekcję do prawdziwej tablicy.

const cards = document.getElementsByClassName("card");
const titles = Array.from(cards).map((c) => c.textContent);

Kiedy używać której metody

Używaj getElementById do szybkiego wyszukiwania unikatowych elementów. Wybierz querySelectorAll, gdy potrzebujesz statycznego obrazu lub złożonych selektorów; użyj rodziny getElementsBy*, gdy zależy Ci konkretnie na dynamicznej kolekcji.

Szybkie sprawdzenie

Wybierz właściwe zachowanie.

Podsumowanie

Dowiedziałeś się, że getElementById zwraca jeden element na podstawie surowego identyfikatora, bez znaku #, a getElementsByClassName i getElementsByTagName zwracają dynamiczne obiekty HTMLCollection. Aby używać metod tablicowych, dynamiczne kolekcje trzeba przekonwertować za pomocą Array.from; nie mają one własnej metody forEach.

Często zadawane pytania

Czy lekcja „getElementById i getElementsByClassName” jest bezpłatna?

Tak — pełny tekst „getElementById i getElementsByClassName” 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 „getElementById i getElementsByClassName”?

Proszę używać klasycznych metod wybierania elementów. Ć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 2 z 4.

Ile czasu zajmuje lekcja „getElementById i getElementsByClassName”?

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