MutationObserver

JavaScript kursu · İleri seviye · Ders 90/100

DOM değişikliklerini gözlemlemek için MutationObserver kullanmayı öğrenirsin.

MutationObserver

MutationObserver, DOM'daki değişiklikleri izleyen bir API'dir. Bir öğeye eklenen ya da çıkarılan düğümleri, değişen öznitelikleri veya metin içeriğini fark edebilir. Sürekli setInterval ile kontrol yapmak yerine, tarayıcı değişiklik olduğunda seni haberdar eder; bu da performansı korur.

Önce bir callback yazarsın, sonra new MutationObserver(callback) ile gözlemciyi oluşturursun. observe metodu hangi öğeyi ve hangi değişiklik türlerini izleyeceğini söyler. İşin bitince disconnect ile gözlemi durdurursun.

observe seçenekleri

observe metoduna ikinci argüman olarak bir seçenekler nesnesi verirsin. En sık kullanılanlar şunlardır:

childList: doğrudan çocuk düğümlerin eklenmesi veya çıkarılması
attributes: öznitelik değişiklikleri
subtree: tüm alt ağacı kapsar
characterData: metin düğümlerinin içeriği

Hangi öznitelikleri izleyeceğini attributeFilter ile daraltabilirsin. Varsayılan olarak hepsi kapalıdır; açmak istediklerini doğru yapmalısın.

Callback ve MutationRecord

Callback iki argüman alır: mutations dizisi ve gözlemcinin kendisi. Her MutationRecord tek bir değişikliği anlatır. Sık kullanılan alanlar:

type: childList, attributes veya characterData
target: değişen öğe
addedNodes ve removedNodes: eklenen ya da çıkarılan düğümler
attributeName: değişen özniteliğin adı

Birden fazla değişiklik aynı anda gelirse dizi birden çok kayıt içerebilir; bu yüzden döngü ile dolaşmalısın.

Uygulama Listeye eklenen öğeleri izle

#list öğesine eklenen düğümleri konsola yazan bir MutationObserver oluştur. childList seçeneği açık olsun.

Örnek çözümü göster

1. new MutationObserver((mutations) => {...}) ile oluştur.
2. Callback içinde mutations dizisini dolaş ve addedNodes'u yazdır.
3. observer.observe(list, { childList: true }) ile izlemeye başla.

Örnek çözüm:
const observer = new MutationObserver((mutations) => {
  for (const m of mutations) {
    for (const node of m.addedNodes) {
      console.log(node);
    }
  }
});
observer.observe(list, { childList: true });

Kendini test et

Hangisi MutationObserver için uygun bir kullanımdır?
- Bir butona tıklanıp tıklanmadığını izlemek
- Sayfa yüklendiğinde kod çalıştırmak
- Bir listeye dinamik olarak eklenen öğeleri fark etmek
- Kullanıcının fare konumunu takip etmek
Cevabı göster

Bir listeye dinamik olarak eklenen öğeleri fark etmek — Doğru. MutationObserver, DOM'a eklenen veya çıkarılan düğümleri yakalar; dinamik liste güncellemeleri buna örnektir.

childList izlemeyi aç

observer.observe(list, {____});

Cevabı göster

observer.observe(list, {childList: true});

MutationRecord alanlarını eşleştir

type

Değişiklik türü
target

Değişen öğe
addedNodes

Eklenen düğümler
attributeName

Değişen öznitelik

İleri seviye bölümündeki tüm dersler

MutationObserver