DOM Manipülasyonu - Eleman Ekleme/Silme

Giriş

Önceki DOM derslerinde, mevcut HTML elemanlarını nasıl seçeceğimizi ve içeriklerini, niteliklerini ve stillerini nasıl değiştireceğimizi öğrendik. Ancak JavaScript'in DOM üzerindeki gücü bunlarla sınırlı değildir. JavaScript kullanarak, web sayfasına tamamen yeni HTML elemanları ekleyebilir, mevcut elemanları kopyalayabilir veya gereksiz elemanları sayfadan kaldırabiliriz.

Bu yetenek, dinamik kullanıcı arayüzleri oluşturmak için kritik öneme sahiptir. Örneğin, kullanıcı bir butona tıkladığında listeye yeni bir öğe eklemek, bir form gönderildiğinde başarı mesajı göstermek veya belirli bir koşul sağlandığında bazı elemanları gizlemek yerine tamamen kaldırmak gibi işlemler, eleman ekleme ve silme yöntemleriyle gerçekleştirilir.

Bu derste, JavaScript ile yeni DOM düğümleri (elemanlar, metinler) oluşturma, bu düğümleri DOM ağacının istediğimiz yerine ekleme ve mevcut düğümleri DOM'dan kaldırma yöntemlerini detaylı bir şekilde inceleyeceğiz.

Yeni Eleman Oluşturma: createElement()

DOM'a yeni bir HTML elemanı eklemenin ilk adımı, o elemanı JavaScript içinde oluşturmaktır. Bunun için document.createElement(etiketAdi) metodu kullanılır. Bu metod, belirtilen etiket adına sahip yeni bir element düğümü oluşturur ancak henüz DOM ağacına eklemez.

// Yeni bir paragraf () elemanı oluşturma
let yeniParagraf = document.createElement("p");
console.log(yeniParagraf); //  (Henüz içeriği veya niteliği yok)

// Yeni bir div elemanı oluşturma
let yeniDiv = document.createElement("div");
console.log(yeniDiv); // 

// Yeni bir liste öğesi () oluşturma
let yeniListeOgesi = document.createElement("li");
console.log(yeniListeOgesi); // 

// Oluşturulan elemana içerik ve nitelik ekleme (henüz DOM'da değil)
yeniParagraf.textContent = "Bu dinamik olarak oluşturuldu.";
yeniParagraf.id = "yeni-p";
yeniParagraf.classList.add("highlight");

console.log(yeniParagraf); // Bu dinamik olarak oluşturuldu.

Metin Düğümü Oluşturma: createTextNode()

Bir elemanın içine sadece metin eklemek istediğimizde veya metni ayrı bir düğüm olarak yönetmek istediğimizde document.createTextNode(metin) metodunu kullanırız.

let metin1 = document.createTextNode("Merhaba ");
let metin2 = document.createTextNode("JavaScript!");

console.log(metin1); // Text node: "Merhaba "
console.log(metin2); // Text node: "JavaScript!"

// Bu metin düğümlerini daha sonra bir elemana ekleyebiliriz.
let spanElement = document.createElement("span");
spanElement.appendChild(metin1);
spanElement.appendChild(metin2);

console.log(spanElement.outerHTML); // Merhaba JavaScript!

Oluşturulan Elemanları DOM'a Ekleme

createElement() ile oluşturulan bir eleman, DOM ağacına eklenene kadar sayfada görünmez. Elemanları DOM'a eklemek için çeşitli metodlar vardır:

parentNode.appendChild(newNode)

En yaygın kullanılan ekleme metodudur. newNode'u (oluşturulan eleman veya metin düğümü), parentNode'un (elemanın ekleneceği ebeveyn eleman) alt elemanlarının sonuna ekler.

// HTML: Öğe 1

// Ebeveyn elemanı seç
let liste = document.getElementById("liste");

// Yeni bir liste öğesi oluştur
let yeniOge = document.createElement("li");
yeniOge.textContent = "Öğe 2";

// Yeni öğeyi listenin sonuna ekle
liste.appendChild(yeniOge);

// Başka bir öğe oluştur ve ekle
let baskaOge = document.createElement("li");
baskaOge.innerHTML = "Öğe 3"; // innerHTML de kullanılabilir
liste.appendChild(baskaOge);

// HTML şimdi:
// 
//   Öğe 1
//   Öğe 2
//   Öğe 3
// 

parentNode.insertBefore(newNode, referenceNode)

newNode'u, parentNode'un alt elemanlarından olan referenceNode'un hemen önüne ekler. Eğer referenceNode null ise, appendChild gibi sona ekler.

// HTML: Paragraf 2

let container = document.getElementById("container");
let p2 = document.getElementById("p2");

// Yeni bir paragraf oluştur
let p1 = document.createElement("p");
p1.textContent = "Paragraf 1";

// p1'i p2'nin önüne ekle
container.insertBefore(p1, p2);

// Başka bir paragraf oluştur
let p3 = document.createElement("p");
p3.textContent = "Paragraf 3";

// p3'ü sona ekle (referenceNode null veya belirtilmemiş gibi davranır)
container.insertBefore(p3, null); // veya container.appendChild(p3);

// HTML şimdi:
// 
//   Paragraf 1
//   Paragraf 2
//   Paragraf 3
// 

Modern Ekleme Metodları: prepend(), append(), before(), after()

Daha modern ve esnek ekleme yöntemleridir. Birden fazla düğüm veya metin eklemeye izin verirler.

• element.prepend(node1, node2, ..., "metin"): Belirtilen düğümleri veya metinleri element'in içeriğinin başına ekler.
• element.append(node1, node2, ..., "metin"): Belirtilen düğümleri veya metinleri element'in içeriğinin sonuna ekler (appendChild'a benzer ama daha esnektir).
• element.before(node1, node2, ..., "metin"): Belirtilen düğümleri veya metinleri element'in hemen önüne (aynı seviyeye) ekler.
• element.after(node1, node2, ..., "metin"): Belirtilen düğümleri veya metinleri element'in hemen sonrasına (aynı seviyeye) ekler.

// HTML: Orta

let kutu = document.getElementById("kutu");
let span = kutu.querySelector("span");

// Başına ekleme
let baslangic = document.createElement("strong");
baslangic.textContent = "Başlangıç ";
kutu.prepend(baslangic, "Metin Başı ");

// Sonuna ekleme
let son = document.createElement("em");
son.textContent = " Son";
kutu.append(" Metin Sonu", son);

// Öncesine ekleme
let once = document.createElement("p");
once.textContent = "Kutudan Önce";
kutu.before(once);

// Sonrasına ekleme
let sonra = document.createElement("p");
sonra.textContent = "Kutudan Sonra";
kutu.after(sonra, " Ek Metin");

// HTML şimdi (yaklaşık):
// Kutudan Önce
// 
//   Başlangıç Metin Başı Orta Metin Sonu Son
// 
// Kutudan Sonra Ek Metin

Elemanları Kaldırma: remove() ve removeChild()

DOM ağacından elemanları kaldırmak için iki ana yöntem vardır:

element.remove()

Modern ve basit bir yöntemdir. Seçilen element'i doğrudan DOM ağacından kaldırır.

// HTML: Bu div silinecek.

let silinecekDiv = document.getElementById("silinecek-div");

if (silinecekDiv) {
    silinecekDiv.remove();
    console.log("Div kaldırıldı.");
} else {
    console.log("Silinecek div bulunamadı.");
}

// HTML şimdi boştur (veya div'in olmadığı durumdadır).

parentNode.removeChild(childNode)

Daha eski bir yöntemdir. parentNode'un alt elemanlarından olan childNode'u kaldırır. Bu metodu kullanmak için hem kaldırılacak elemanı hem de onun ebeveynini bilmeniz gerekir.

// HTML: Görev 1Görev 2Görev 3

let liste = document.getElementById("gorev-listesi");
let silinecekGorev = document.getElementById("silinecek-gorev");

if (liste && silinecekGorev) {
    // Ebeveyni kullanarak çocuğu kaldırma
    liste.removeChild(silinecekGorev);
    // veya silinecekGorev.parentNode.removeChild(silinecekGorev);
    console.log("Görev 2 kaldırıldı.");
} else {
    console.log("Liste veya silinecek görev bulunamadı.");
}

// HTML şimdi:
// 
//   Görev 1
//   Görev 3
// 

Elemanları Değiştirme: replaceWith()

Bir DOM elemanını başka bir elemanla veya metinle değiştirmek için element.replaceWith(newNodeOrString) metodu kullanılır.

// HTML: Bu eski paragraf.

let eskiParagraf = document.getElementById("eski-paragraf");

// Yeni bir div oluştur
let yeniDiv = document.createElement("div");
yeniDiv.textContent = "Bu yeni div, paragrafın yerini aldı.";
yeniDiv.style.color = "green";

if (eskiParagraf) {
    eskiParagraf.replaceWith(yeniDiv, " Ek Metin"); // Birden fazla düğüm/metin ile değiştirebilir
    console.log("Paragraf div ile değiştirildi.");
} else {
    console.log("Değiştirilecek paragraf bulunamadı.");
}

// HTML şimdi (yaklaşık):
// Bu yeni div, paragrafın yerini aldı. Ek Metin

Bu derste, JavaScript ile DOM ağacını dinamik olarak nasıl değiştirebileceğimizi öğrendik:

• Eleman Oluşturma:
  • document.createElement(etiketAdi): Yeni bir HTML elemanı oluşturur.
  • document.createTextNode(metin): Yeni bir metin düğümü oluşturur.
• Eleman Ekleme:
  • parentNode.appendChild(newNode): Elemanın sonuna ekler.
  • parentNode.insertBefore(newNode, referenceNode): Belirtilen elemanın önüne ekler.
  • element.append(...nodesOrDOMStrings): Elemanın içeriğinin sonuna ekler (daha modern).
  • element.prepend(...nodesOrDOMStrings): Elemanın içeriğinin başına ekler (daha modern).
  • element.before(...nodesOrDOMStrings): Elemanın önüne (aynı seviyeye) ekler (daha modern).
  • element.after(...nodesOrDOMStrings): Elemanın sonrasına (aynı seviyeye) ekler (daha modern).
• Eleman Kaldırma:
  • element.remove(): Elemanı doğrudan kaldırır (daha modern).
  • parentNode.removeChild(childNode): Ebeveyni üzerinden çocuğu kaldırır.
• Eleman Değiştirme:
  • element.replaceWith(...nodesOrDOMStrings): Elemanı başka düğümlerle veya metinlerle değiştirir.

DOM elemanlarını ekleme, silme ve değiştirme yeteneği, kullanıcı etkileşimlerine yanıt veren, dinamik ve modern web uygulamaları oluşturmanın temelini oluşturur.

Bir sonraki derste, kullanıcı etkileşimlerini yakalamamızı ve bunlara tepki vermemizi sağlayan DOM olaylarını (events) inceleyeceğiz.