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

Paul Kinlan

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

Bu özellik web geliştiricileri tarafından yaygın olarak kullanılmasa da sayfadaki bir şey değiştiğinde bir işlem yapmak isteyen Chrome uzantıları için çok kullanışlı ve popüler bir kullanım alanı sunuyordu.

Mutasyon etkinlikleri faydalı olsa da aynı zamanda bazı performans sorunları oluşturur. Etkinlikler yavaştır ve eşzamanlı olarak çok sık tetiklenir. Bu da istenmeyen bazı tarayıcı hatalarına neden olur.

DOM4 spesifikasyonunda kullanıma sunulan DOM Mutasyon Gözlemcileri, mutasyon etkinliklerinin yerini alacak. Mutasyon etkinlikleri her değişiklik için yavaş etkinlikler tetikler. Mutasyon gözlemcileri ise DOM'da birden fazla değişiklikten sonra gönderilebilecek geri çağırma işlevlerini kullanarak daha hızlıdır.

API'nin sunduğu değişiklik listesini manuel olarak yönetebilir veya bu görevi kolaylaştıran ve DOM'da yapılan değişikliklerle ilgili bir güvenilirlik katmanı ekleyen Mutation Summary gibi bir kitaplık kullanabilirsiniz.

DOM'daki değişiklikleri algılamak için Chrome Beta'da Mutasyon Gözlemcilerini kullanmaya başlayabilir ve kararlı sürüme (Chrome 18) geçtiğinde kullanmaya hazır olabilirsiniz. Şu anda desteği sonlandırılan mutasyon etkinliklerini kullanıyorsanız mutasyon gözlemcilerine geçiş yapmanız yeterlidir.

Aşağıda, eklenen düğümleri mutasyon etkinlikleriyle listelemenin bir örneği verilmiştir:

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

Mutasyon gözlemcileri ile bu durum şöyle 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);