DOM CRUD İşlemleri

Document Object Model (DOM), tarayıcıların HTML'i temsil etme biçimidir. Her bir öğeyi, özniteliği ve metin parçasını bir nesneye dönüştürür. JavaScript, ekranda gördüğünüz içeriği değiştirmek için bu nesneleri kullanır.

Bir düğmeye tıkladığınızda sayfa yenilenmeden güncelleniyorsa, JavaScript DOM'u değiştiriyor demektir.

Bu yöntemlerle CRUD (Oluşturma, Okuma, Güncelleme, Silme) işlemlerini gerçekleştirebilirsiniz.

1. Öğelere Erişme (Okuma)

Bir şeyi değiştirmek için önce onu bulmalısınız. Şu yöntemleri kullanın:

  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()

2. Öğeler Oluşturma (Oluşturma)

JavaScript kullanarak yeni HTML öğeleri oluşturabilirsiniz.

  • createElement("tagName") öğeyi bellekte oluşturur.
  • append() içeriği bir üst öğenin (parent) sonuna ekler.
  • appendChild() tek bir düğümü (node) son çocuk olarak ekler.
  • prepend() içeriği bir üst öğenin başına ekler.
  • before() bir öğeyi belirli bir öğeden önce yerleştirir.
  • after() bir öğeyi belirli bir öğeden sonra yerleştirir.
  • insertBefore() bir öğeyi belirli bir çocuktan önce yerleştirir.

Not: Bir öğe, siz onu sayfaya ekleyene kadar bellekte kalır.

3. Öğeleri Güncelleme (Güncelleme)

Şu özellikleri kullanarak mevcut içeriği değiştirebilirsiniz:

  • innerText: Sadece görünür metni değiştirir.
  • textContent: Gizli metinler de dahil olmak üzere tüm metni değiştirir.
  • innerHTML: İçeriği değiştirir ve HTML etiketleri eklemenize olanak tanır.

4. Özniteliklerle Çalışma (Güncelleme)

Öznitelikler (attributes), öğeler hakkında ek bilgi sağlar.

  • setAttribute(name, value): Bir özniteliği ayarlar veya değiştirir.
  • getAttribute(name): Bir öznitelik değerini getirir.
  • removeAttribute(name): Bir özniteliği siler.
  • hasAttribute(name): Bir özniteliğin var olup olmadığını kontrol eder.

Profesyonel ipucu: Eski sınıfları kaldırmadan yeni bir sınıf eklemek için classList.add() kullanın. setAttribute() ise tüm değeri tamamen değiştirir.

5. Öğeleri Kaldırma (Silme)

Bir öğeyi sayfadan silmek için şunu kullanın:

  • remove()

Bir CRUD akışının özeti:

  • Oluşturma (Create): createElement()
  • Güncelleme (Update): innerText = "Yeni metin"
  • Ekleme (Add): appendChild()
  • Silme (Delete): remove()

Bu yöntemlerde uzmanlaşmak, yapılacaklar listesi veya hesap makinesi gibi etkileşimli uygulamalar geliştirmenize olanak tanır. Bu, front-end geliştirme için hayati bir beceridir.

Kaynak: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka