JavaScript Academy · Ders

Düğümleri Kaldırma ve Değiştirme

Öğeleri güvenli şekilde kaldırın ve değiştirin.

Düğümleri Kaldırma ve Değiştirme, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Düğümleri Çıkarma

Öğe eklemenin yanı sıra çoğu zaman öğeleri kaldırmanız veya değiştirmeniz gerekir. Modern DOM yöntemleri bu işlemleri kısa ve okunabilir hâle getirir.

remove

remove, bir öğeyi üst öğe başvurusuna gerek kalmadan doğrudan DOM'dan ayırır.

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

removeChild

Daha eski removeChild, üst öğe üzerinde çağrılır ve kaldırılan düğümü döndürür; böylece bu düğümü yeniden kullanabilirsiniz.

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

Birden Çok Düğümü Kaldırma

Tüm alt öğeleri temizlemek için liste boşalana kadar döngü kurun veya innerHTML değerini boş bir dize olarak ayarlayın; bu hızlıdır ancak başvuruları siler.

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

replaceWith

replaceWith, tek bir çağrıyla bir öğeyi bir veya daha fazla yeni düğüm ya da dizeyle değiştirir.

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

replaceWith ile Birden Çok Düğüm

replaceWith birden fazla bağımsız değişken kabul eder; böylece bir düğümü birçok düğümle değiştirebilirsiniz.

old.replaceWith(headerEl, bodyEl);

replaceChild

Klasik replaceChild(newNode, oldNode), üst öğe üzerinde çağrılır. Bağımsız değişkenlerin sırasına dikkat edin: önce yeni, sonra eski.

list.replaceChild(newItem, oldItem);

Ayrılmış Düğümler Varlığını Korur

Kaldırılan bir düğüm yok edilmez. Bir başvurusunu saklarsanız daha sonra yeniden ekleyebilirsiniz; bu, gösterme/gizleme düzenleri için kullanışlıdır.

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

replaceChildren

replaceChildren, bir öğenin tüm alt öğelerini tek seferde değiştirir veya bağımsız değişken olmadan çağrıldığında onları temizler.

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

Bellek ve Dinleyiciler

Bir öğeyi kaldırmak, ayrılmış durumdayken olay dinleyicilerinin çalışmasını da durdurur. Öğeyi yeniden eklerseniz öğenin kendisine bağlanmış dinleyiciler varlığını korur.

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

Yöntem Seçimi

Temiz ve modern kod için remove ve replaceWith kullanmayı tercih edin. Döndürülen düğüme ihtiyacınız olduğunda veya çok eski ortamları desteklemeniz gerektiğinde removeChild/replaceChild kullanın.

Hızlı Kontrol

Bağımsız değişkenlerin sırasını kontrol edin.

Özet

Düğümleri modern remove veya üst öğe tabanlı removeChild ile kaldırın. Bunları replaceWith (modern, birden çok bağımsız değişken destekli) ya da replaceChild(newNode, oldNode) ile değiştirin. Tüm alt öğeleri sıfırlamak için replaceChildren kullanın. Ayrılmış düğümler bellekte varlığını sürdürür ve daha sonra yeniden eklenebilir.

Sıkça Sorulan Sorular

“Düğümleri Kaldırma ve Değiştirme” dersi ücretsiz mi?

Evet — “Düğümleri Kaldırma ve Değiştirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Düğümleri Kaldırma ve Değiştirme” dersinde ne öğreneceğim?

Öğeleri güvenli şekilde kaldırın ve değiştirin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Düğümleri Kaldırma ve Değiştirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön