Web geliştirme, kullanıcı etkileşimleri ve dinamik içerik değişiklikleriyle dolu bir alan haline gelmiştir. Bu nedenle, DOM'da gerçekleşen değişiklikleri gözlemlemek önemlidir. Bu görevi yerine getirmek için, modern tarayıcılar tarafından desteklenen MutationObserver
API'sini kullanabiliriz.
MutationObserver Nedir?
MutationObserver
, DOM'da yapılan değişiklikleri gözlemlemek için kullanılan bir JavaScript API'sidir. DOM'da meydana gelen değişiklikleri takip edebilir ve bu değişikliklere yanıt olarak belirli eylemleri gerçekleştirebiliriz. MutationObserver
, özellikle tek bir DOM elemanındaki değişiklikleri izlemek için tasarlanmıştır.
MutationObserver Kullanımı
Temel Kullanım
Öncelikle, bir MutationObserver
örneği oluşturmamız gerekiyor. Aşağıda temel bir kullanım örneği bulunmaktadır:
// Hedef elementi seç
const targetElement = document.getElementById('target');
// Yeni bir MutationObserver örneği oluştur
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'childList') {
console.log('Yeni bir çocuk öğe eklendi!');
}
});
});
// Gözlemciyi hedef elemente bağla ve izlemek istediğimiz mutasyon türlerini belirt
observer.observe(targetElement, { childList: true });
Yukarıdaki örnekte, childList: true
ile belirtilen childList
tipindeki bir mutasyon (değişiklik) gözlemlenmektedir. Bu, hedef elementin altındaki çocuk öğelerdeki değişiklikleri izlemek için kullanılır.
Angular ile MutationObserver Kullanımı
Angular uygulamalarında, MutationObserver
'ı kullanmak oldukça yaygındır. Örneğin, bir bileşenin içindeki değişiklikleri izlemek için kullanılabilir. Aşağıda, Angular ile MutationObserver
'ı kullanarak bir örnek bulunmaktadır:
import { Component, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-example',
template: `
<div #targetElement>
<p>Bu bir paragraf.</p>
</div>
`,
styles: []
})
export class ExampleComponent implements AfterViewInit {
@ViewChild('targetElement') targetElement!: ElementRef;
ngAfterViewInit(): void {
// targetElement'e erişim
if (this.targetElement) {
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'childList') {
console.log('Yeni bir çocuk öğe eklendi!');
// sonlandırma işlemi yapıldı.
observer.disconnect();
}
});
});
// targetElement nesnesini nativeElement'e dönüştür
let htmlElement = this.targetElement.nativeElement
// htmlElement'in alt elementlerini dinle
observer.observe(htmlElement , { childList: true });
// DOM öğesine erişim sağlandıktan sonra işlemleri gerçekleştir
console.log(
'targetElement içeriği:',
htmlElement .textContent
);
// 2 saniye sonra yeni bir çocuk öğe ekleyelim
setTimeout(() => {
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Bu bir yeni paragraf.';
htmlElement.appendChild(newParagraph);
}, 2000);
}
}
}
Bu örnekte, Angular bileşeni içinde MutationObserver
kullanarak targetElement
içindeki çocuk öğelerdeki değişiklikleri izliyoruz. Bu örneğin çalışması için, bileşenin AfterViewInit
yaşam döngü kancasında MutationObserver
'ı başlatıyoruz.
Bu makalede, MutationObserver
'ın temel kullanımını ve Angular uygulamalarında nasıl entegre edilebileceğini gördük. DOM değişikliklerini izlemek ve bu değişikliklere yanıt vermek, kullanıcı arayüzlerini daha dinamik ve etkileşimli hale getirmek için güçlü bir araçtır. MutationObserver
kullanarak, DOM'daki değişiklikleri yakalayabilir ve uygulamanızı daha etkili hale getirebilirsiniz.
Aşağıda adresten kodu daha detaylı inceleyebilirsiniz:
https://stackblitz.com/edit/kzwndp?file=src%2Fapp%2Fapp.component.html
Yorumlar Henüz yorum yapılmamış
Yeni Yorum