JavaScript Academy · Lekcja

Usuwanie i zastępowanie węzłów

Proszę bezpiecznie usuwać i zastępować elementy.

Lekcja 4 z 413 kroki

Usuwanie i zastępowanie węzłów to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 4 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.

Usuwanie węzłów

Oprócz dodawania elementów często trzeba je również usuwać lub zamieniać. Nowoczesne metody DOM pozwalają robić to zwięźle i czytelnie.

remove

remove bezpośrednio odłącza element od DOM, bez potrzeby odwoływania się do elementu nadrzędnego.

const alert = document.querySelector(".alert");
alert.remove();

removeChild

Starsza metoda removeChild jest wywoływana na elemencie nadrzędnym i zwraca usunięty węzeł, dzięki czemu można go ponownie wykorzystać.

const list = document.querySelector("ul");
const removed = list.removeChild(list.firstElementChild);

Usuwanie wielu elementów

Aby usunąć wszystkie elementy potomne, należy wykonywać pętlę aż do uzyskania pustego elementu albo ustawić innerHTML na pusty ciąg znaków (jest to szybkie, ale usuwa odwołania).

while (list.firstChild) {
  list.removeChild(list.firstChild);
}

replaceWith

replaceWith zastępuje element jednym lub większą liczbą nowych węzłów albo ciągów znaków w ramach jednego wywołania.

const old = document.querySelector(".placeholder");
const fresh = document.createElement("div");
old.replaceWith(fresh);

replaceWith z wieloma węzłami

replaceWith przyjmuje kilka argumentów, dzięki czemu można zastąpić jeden węzeł wieloma innymi.

old.replaceWith(headerEl, bodyEl);

replaceChild

Klasyczna metoda replaceChild(newNode, oldNode) jest wywoływana na elemencie nadrzędnym. Należy pamiętać o kolejności argumentów: najpierw nowy, potem stary.

list.replaceChild(newItem, oldItem);

Odłączone węzły nadal istnieją

Usunięty węzeł nie zostaje zniszczony. Jeśli zachowa się do niego odwołanie, można wstawić go ponownie później, co jest przydatne przy implementowaniu schematów pokazywania i ukrywania.

const saved = panel;
panel.remove();
// later:
container.append(saved);

replaceChildren

replaceChildren jednocześnie zastępuje wszystkie elementy potomne elementu, a wywołane bez argumentów usuwa je.

list.replaceChildren(itemA, itemB); // set new contents
list.replaceChildren();             // remove everything

Pamięć i nasłuchiwacze zdarzeń

Usunięcie elementu powoduje również, że jego nasłuchiwacze zdarzeń przestają reagować, gdy element jest odłączony. Po ponownym dodaniu nasłuchiwacze przypisane bezpośrednio do elementu nadal pozostają aktywne.

btn.addEventListener("click", handler);
btn.remove();          // handler will not fire while detached
container.append(btn); // handler works again

Wybór metody

W nowoczesnym, czytelnym kodzie należy preferować remove i replaceWith. Metod removeChild/replaceChild należy używać, gdy potrzebny jest zwracany węzeł lub konieczne jest obsłużenie bardzo starych środowisk.

Szybkie sprawdzenie

Sprawdź kolejność argumentów.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Węzły można usuwać za pomocą nowoczesnej metody remove lub wywoływanej na elemencie nadrzędnym metody removeChild. Można je zastępować za pomocą replaceWith (nowoczesna metoda obsługująca wiele argumentów) lub replaceChild(newNode, oldNode). Aby zresetować wszystkie elementy potomne, należy użyć replaceChildren. Odłączone węzły pozostają w pamięci i można je później wstawić ponownie.

Bezpłatny start

Ucz się JavaScript dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 59
Lekcje: 200

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Usuwanie i zastępowanie węzłów” jest bezpłatna?

Tak — pełny tekst „Usuwanie i zastępowanie węzłów” 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 „Usuwanie i zastępowanie węzłów”?

Proszę bezpiecznie usuwać i zastępować elementy. Ć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 4 z 4.

Ile czasu zajmuje lekcja „Usuwanie i zastępowanie węzłów”?

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

← Powrót do JavaScript Academy