Javascript Orta Seviye: Mutation Observer

Bu video, JavaScript'te DOM üzerindeki değişiklikleri (eleman ekleme, silme, öznitelik değişikliği vb.) takip etmeye yarayan Mutation Observer API'sini detaylı bir şekilde incelemektedir.

Öne Çıkan Başlıklar:

• Nedir ve Kullanım Senaryoları (0:37):Mutation Observer, DOM ağacındaki mutasyonları izleyen bir web API'sidir. Özellikle dinamik içerik yüklemeleri, reklam widget'ları, form validasyonları ve lazy load gibi işlemlerde tercih edilir.
• Temel Kullanım (2:11): Bir Mutation Observer nesnesi oluşturulur, izlenecek hedef eleman belirlenir ve observe() metodu ile gözlem başlatılır.
• Konfigürasyon Seçenekleri (7:03):
  • childList: Çocuk elemanların değişimini izler.
  • attributes: Öznitelik değişimlerini gözlemler.
  • characterData: Metin içeriği değişimlerini takip eder.
  • subtree: Hedef elemanın tüm alt ağacını (çocukların çocukları) izlemek için kullanılır.
• MutationRecord Nesnesi (8:25): Değişiklik hakkında tip, hedef eleman, eklenen/silinen düğümler ve eski değerler gibi bilgileri içeren rapordur.
• Durdurma (9:41): disconnect() metodu ile gözlemci durdurularak performans kaybı önlenebilir.
• Detaylı Örnek (10:43): Videonun sonunda, üç farklı butona bağlı olarak metin, öznitelik ve eleman ekleme işlemlerini gözlemleyen kapsamlı bir uygulama örneği yapılmıştır.