MutationObserver

MutationObserver, geliştiricilere DOM'da gerçekleşen değişimleri yakalanması ve bir tepki üretilmesi için bir yol sunar. Dönüşüm (Mutasyon) Olayları'nın yerini almak üzere tasarlanmış, DOM3 Events (Olaylar) belirlemesinde tanımlanmıştır.

DOM dönüşüm gözlemcilerini (mutation observer) yaratmak için kullanılır.

new MutationObserver(
  function geriyeCagri
);

Yönergeler (Parametreler)

geriyeCagri

Her DOM dönüşümünde çağrılacak işlerliktir. Gözlemci, bu işlerliği iki yönergeyle çağıracaktır. İlki, MutationRecord cinsinden nesneleri barındıran bir dizi; ikincisi MutationObserver'ın geçerli olan örneğidir.

Belirtilen DOM düğüm noktasının (node) yapısında meydana gelen değişimlerin bildirilebilmesi için MutationObserver nesnesini kaydettirir.

void observe(
  Node hedef,
  MutationObserverInit ayarlar
);

Yönergeler

hedef

DOM yapısındaki dönüşümlerin gözleneceği, Node sınıfında bir DOM düğüm noktasıdır.

ayarlar

Hangi dönüşümlerin bildirileceğini belirten bir MutationObserverInit sınıfı nesnesidir.

MutationObserver nesnesinin DOM dönüşümlerinden haber almasını durdurur.  observe() işlerliği çağrılıncaya dek, nesnenin geriye çağrı (callback) işlerliği, DOM dönüşümlerinde çağrılmaz.

void disconnect();

MutationObserver nesnesinin kayıt kuyruğunda tuttuğu kayıtları elde etmeye ve kuyruğu boşaltmaya yarar.

Array takeRecords();

Döndürülen değer

MutationRecord nesnelerinden oluşmuş bir dizidir.

MutationObserverInit aşağıdaki niteliklerin tanımlandığı nesnedir.

Aşağıdaki örnek bu blog gönderisinden alınmıştır. Ancak açıklamalar ve değişken adları değiştirilmiştir.

// Hedef DOM ögesini seç.
var nHedef = document.getElementById('bir-kimlik-degeri');

// Bir gözlemci yarat.
var nGozlemci = new MutationObserver(function(nDonusumler) {

  // Öge dönüştüğünde, tüm dönüşümleri dolaş.
  nDonusumler.forEach(function(nDonusum) {

    // Sıradaki dönüşümü komut satırı ekranına yazdır.
    console.log(nDonusum.type);

  });

});

// Gözlemcinin ayarlarını belirle.
var nAyarlar = { attributes: true, childList: true, characterData: true };

// Gözlemciyi belirlenen ayarlarla belirtilen ögeye ata.
nGozlemci.observe(nHedef, nAyarlar);

// Daha sonraları, aşağıdaki komutla gözlemleme durdurulabilir.
nGozlemci.disconnect();

• Kısa bir inceleme
• Daha ayrıntılı bir tartışma
• Chromium geliştiricisi Rafael Weinstein'ın ekran vidyosu
• Dönüşüm özet kütüphanesi