Przechodzenie między rodzicami, dziećmi i rodzeństwem
Proszę poruszać się po drzewie DOM między powiązanymi węzłami.
Przechodzenie między rodzicami, dziećmi i rodzeństwem to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 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.
Po co przechodzić po drzewie
Gdy masz już jeden element, często potrzebujesz odwołać się do jego sąsiadów: kontenera, który go otacza, elementów znajdujących się w środku albo elementu znajdującego się bezpośrednio obok. Właściwości do przechodzenia po DOM pozwalają poruszać się po drzewie.
parentElement
parentElement zwraca element zawierający bieżący element albo null na szczycie drzewa.
const item = document.querySelector(".item");
const container = item.parentElement;
console.log(container.className);children
children to dynamiczny obiekt HTMLCollection zawierający bezpośrednie elementy potomne danego elementu (węzły tekstowe są pomijane).
const list = document.querySelector("ul");
console.log(list.children.length);firstElementChild i lastElementChild
Właściwości te prowadzą bezpośrednio do pierwszego lub ostatniego elementu potomnego, pomijając węzły tekstowe i komentarze.
const list = document.querySelector("ul");
console.log(list.firstElementChild.textContent);
console.log(list.lastElementChild.textContent);nextElementSibling
nextElementSibling zwraca element znajdujący się bezpośrednio za bieżącym elementem w obrębie tego samego elementu nadrzędnego.
const current = document.querySelector("li.active");
const after = current.nextElementSibling;previousElementSibling
previousElementSibling porusza się w przeciwnym kierunku. Obie właściwości zwracają null, gdy nie ma elementu sąsiedniego.
const current = document.querySelector("li.active");
const before = current.previousElementSibling;Właściwości elementów a właściwości węzłów
Uwaga: childNodes, nextSibling i parentNode uwzględniają węzły tekstowe (w tym białe znaki). Wersje z *Element* są zazwyczaj tym, czego potrzebujesz.
list.childNodes; // includes whitespace text nodes
list.children; // only elementsclosest
closest przechodzi w górę drzewa od bieżącego elementu i zwraca najbliższego przodka (lub sam element) pasującego do selektora.
const btn = document.querySelector(".delete");
const row = btn.closest("tr");closest w delegowaniu zdarzeń
closest świetnie sprawdza się, gdy kliknięcie nastąpi na elemencie wewnętrznym, ale potrzebujesz zewnętrznego kontenera, który je obsługuje.
function onClick(e) {
const card = e.target.closest(".card");
if (card) {
console.log(card.dataset.id);
}
}matches
matches sprawdza, czy sam element spełnia warunek selektora, i zwraca wartość logiczną. Jest przydatna razem z metodami przechodzenia po drzewie.
const el = document.querySelector(".item");
console.log(el.matches(".item.active"));Łączenie przechodzenia po drzewie
Możesz łączyć kolejne kroki przechodzenia, aby poruszać się po złożonych strukturach, na przykład przejść od przycisku w górę do jego wiersza, a następnie do kolejnego wiersza.
const next = btn.closest("tr").nextElementSibling;Szybkie sprawdzenie
Wybierz właściwą właściwość.
Podsumowanie
Możesz poruszać się w górę za pomocą parentElement i closest, przechodzić do elementów potomnych za pomocą children, firstElementChild i lastElementChild, a także przechodzić w bok za pomocą nextElementSibling i previousElementSibling. Wybieraj właściwości dotyczące wyłącznie elementów, aby pomijać białe znaki będące węzłami tekstowymi.
Często zadawane pytania
Czy lekcja „Przechodzenie między rodzicami, dziećmi i rodzeństwem” jest bezpłatna?
Tak — pełny tekst „Przechodzenie między rodzicami, dziećmi i rodzeństwem” 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 „Przechodzenie między rodzicami, dziećmi i rodzeństwem”?
Proszę poruszać się po drzewie DOM między powiązanymi węzłami. Ć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 3 z 4.
Ile czasu zajmuje lekcja „Przechodzenie między rodzicami, dziećmi i rodzeństwem”?
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
- Wybieranie elementów za pomocą querySelector
- getElementById i getElementsByClassName
- Przechodzenie między rodzicami, dziećmi i rodzeństwem
- NodeList a HTMLCollection