MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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.

Kurucu İşlerlik (İşlev)

MutationObserver()

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.

Nesne İşlerlikleri

void observe( Node hedef, MutationObserverInit ayarlar );
void disconnect();
Array takeRecords();

Anımsatma: Hedefin Node diye belirtilen cinsi,  NodeJS ile karıştırılmamalıdır..

observe()

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.
Anımsatma: Bir DOM ögesine (element) gözlemci atamak tıpkı addEventListener ile bir olay belirtmek gibidir. Eğer aynı gözlemciyi aynı geriye çağrı (callback) işlerliğiyle birden fazla kez aynı ögeye atarsanız dönüşümlerde işlerlik ikişer-üçer kez çağrılmaz. Tek bir kez gerçekleşir. Fakat aynı gözlemciyi aynı ögeye farklı geriye çağrı işlerlikleriyle atarsanız bu durumda her dönüşümde belirtilen tüm geriye çağrı işlerlikleri yürütülür.

disconnect()

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();

takeRecords()

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

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

Anımsatma: En azından childList, attributes veyâ characterData nitelikleri true olarak belirtilmelidir. Tersi durumda, "Geçersiz veyâ hatalı bir metin belirtildi. (An invalid or illegal string was specified)" hatasıyla karşılaşılabilir.
Nitelik Açıklama
childList Eğer true olarak belirtilirse DOM öğesinde gerçekleştirilen öge veyâ düğüm noktası eklemeler-çıkarmalar gözlenir. Metin düğüm noktaları (text node) da bunun içerisindedir.
attributes Eğer true olarak belirtilirse hedef ögenin niteliklerinde ortaya çıkan değişiklikler gözlenir.
characterData Eğer true olarak belirtilirse hedef ögenin verisindeki değişimler gözlenir.
subtree Eğer true olarak belirtilirse hedef ögenin ve altögelerinin dönüşümleri gözlenir.
attributeOldValue Eğer true olarak belirtilirse niteliğin değişimden önceki değeri de kayıt altına alınır.
characterDataOldValue Eğer true olarak belirtilirse ögenin verisinin değişimden önceki değeri de kaydedilir.
attributeFilter Eğer tüm niteliklerin gözlenmesi gerekmiyorsa gözlenmesi istenen niteliklerin adlarının bir dizisi bu niteliğe atanır.

Örnek Kullanım

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();

Ayrıca Okuyunuz

Belirlemeler

Belirleme Durum Yorum
DOM
The definition of 'MutationObserver' in that specification.
Living Standard  

Tarayıcı Desteği

Durum Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Temel destek 18 -webkit
26
(Yes) 14 (14) 11 15 6.0 -webkit
7
Durum Android Chrome for Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Temel destek 4.4 18 -webkit
26
(Yes) 14.0 (14) 11 (8.1) 15 6 -webkit
7

Document Tags and Contributors

 Contributors to this page: myteril
 Last updated by: myteril,