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