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.
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; ikincisiMutationObserver
'ın geçerli olan örneğidir.
Nesne İşlerlikleri
void observe( |
void disconnect(); |
Array takeRecords(); |
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.
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.
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 |