Mutasyon gözlemcileriyle DOM değişikliklerini algılama

Paul Kinlan

2000 yılında, geliştiricilerin bir DOM'deki değişikliklere (ör.DOMNodeRemoved, DOMAttrModified vb.) tepki vermesini kolaylaştırmak için Mutation Events API'si belirleniyordu.

Bu özellik, web geliştiricileri tarafından yaygın bir şekilde kullanılmıyordu. Ancak, sayfada bir şeyler değiştiğinde bir işlem yapmak istediklerinde, Chrome Uzantılarının oldukça kullanışlı ve popüler bir kullanım alanı sağladı.

Dönüşüm Etkinlikleri yararlıdır ancak aynı zamanda bazı performans sorunlarına neden olur. Etkinlikler yavaştır ve eşzamanlı olarak çok sık etkinleşir. Bu da bazı istenmeyen tarayıcı hatalarına neden olur.

DOM4 spesifikasyonunda kullanıma sunulan DOM Mutasyon Gözlemcileri, Mutasyon Etkinliklerinin yerini alacaktır. Mutasyon Etkinlikleri her bir değişiklik için yavaş etkinlikleri tetiklerken Dönüşüm Gözlemcileri DOM'da birden fazla değişiklikten sonra sunulabilen geri çağırma işlevlerini daha hızlı bir şekilde kullanır.

API'nin sunduğu değişikliklerin listesini manuel olarak yönetebilir veya bu görevi kolaylaştırıp DOM'da gerçekleşen değişiklikler hakkında bir güvenilirlik katmanı ekleyen Dönüşüm Özeti gibi bir kitaplık kullanabilirsiniz.

DOM'daki değişiklikleri algılamak ve kararlı sürüme (Chrome 18) gelindiğinde DOM'yi kullanmaya hazır olmak için Chrome Beta'da Mutasyon Gözlemcileri'ni kullanmaya başlayabilirsiniz. Şu anda desteği sonlandırılmış Mutasyon Etkinlikleri'ni kullanıyorsanız Mutasyon Gözlemcileri'ne geçiş yapmanız yeterlidir.

Eklenen düğümlerin Dönüşüm Etkinlikleri ile listelenmesine dair bir örneği burada bulabilirsiniz:

var insertedNodes = [];
document.addEventListener("DOMNodeInserted", function(e) {
    insertedNodes.push(e.target);
}, false);
console.log(insertedNodes);

Mutation Observers ile şu şekilde görünür:

var insertedNodes = [];
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
    for (var i = 0; i < mutation.addedNodes.length; i++)
        insertedNodes.push(mutation.addedNodes[i]);
    })
});
observer.observe(document.documentElement, { childList: true });
console.log(insertedNodes);