JavaScript'de Mutation Observer

Merhaba arkadaşlar, bugün sizlere JavaScript'te Mutation Observer'dan bahsedeceğim. Mutation Observer, DOM'daki (Document Object Model) değişikliklerini izlememize ve bu değişikliklere karşılık olarak belirli işlemleri gerçekleştirmemize olanak tanır. Gelin, adım adım bu önemli kavramı öğrenelim.

Mutation Observer Nedir?

Mutation Observer, JavaScript'te DOM'daki değişiklikleri izlemek ve bu değişikliklere tepki vermek için kullanılan bir API'dir. Bu API sayesinde, DOM üzerinde gerçekleşen öğe ekleme, silme ve özellik değiştirme gibi işlemleri takip edebiliriz.

Mutation Observer Nasıl Kullanılır?

Mutation Observer kullanmak için öncelikle bir MutationObserver nesnesi oluşturmalıyız. Bu nesnenin içerisine, DOM'daki değişikliklere karşılık olarak çalışacak bir geri çağırma (callback) fonksiyonu ekleriz. Ardından, bu nesneyi DOM'daki bir öğeye bağlayarak izlemeye başlarız.

Kod Örnekleri

Kod Örneği 1: Öğe Ekleme ve Silme İzlemek

// Geri çağırma fonksiyonu tanımlama
function callback(mutations) {
  mutations.forEach((mutation) => {
    console.log(`${mutation.type}: ${mutation.target.tagName}`);
  });
}

// Mutation Observer nesnesi oluşturma
const observer = new MutationObserver(callback);

// İzlemeye alınacak öğeyi seçme ve bağlama
const targetNode = document.querySelector("#container");
observer.observe(targetNode, { childList: true });

// Örnek DOM değişiklikleri
setTimeout(() => {
  const newElement = document.createElement("div");
  newElement.textContent = "Yeni öğe";
  targetNode.appendChild(newElement);
}, 1000);

setTimeout(() => {
  targetNode.removeChild(targetNode.firstElementChild);
}, 2000);

Bu örnekte, #container adlı öğenin içerisine eklenecek ve çıkarılacak öğeleri izliyoruz. DOM'daki değişiklikler gerçekleştiğinde, geri çağırma fonksiyonu çalışarak değişiklik tipini ve hedef öğeyi konsola yazdırır.

Kod Örneği 2: Öğe Özellikleri İzlemek

// Geri çağırma fonksiyonu tanımlama
function callback(mutations) {
  mutations.forEach((mutation) => {
    console.log(`${mutation.type}: ${mutation.target.tagName} - ${mutation.attributeName}`);
  });
}

// Mutation Observer nesnesi oluşturma
const observer = new MutationObserver(callback);

// İzlemeye alınacak öğeyi seçme ve bağlama
const targetNode = document.querySelector("#container");
observer.observe(targetNode, { attributes: true });

// Örnek DOM değişiklikleri
setTimeout(() => {
  targetNode.setAttribute("data-example", "true");
}, 1000);

setTimeout(() => {
    targetNode.removeAttribute("data-example");
}, 2000);

Bu örnekte, #container adlı öğenin özelliklerini (attribute) izliyoruz. DOM'daki değişiklikler gerçekleştiğinde, geri çağırma fonksiyonu çalışarak değişiklik tipini, hedef öğeyi ve değişen özelliği konsola yazdırır.

Kullanım Alanları

Mutation Observer, web uygulamalarında DOM üzerinde gerçekleşen değişikliklere dinamik olarak tepki vermek için kullanılabilir. İşte bazı örnek kullanım alanları:

• Dinamik olarak yüklenen içerikleri takip etmek ve bu içeriklerin yüklenmesine karşılık olarak belirli işlemleri gerçekleştirmek.
• Web sayfasındaki belirli öğelerin özelliklerinin veya içeriğinin değiştirilmesine karşılık olarak, stil veya davranışları değiştirmek.
• Kullanıcı etkileşimlerine göre sayfadaki öğelerin eklenmesini veya kaldırılmasını izlemek ve buna göre işlemler yapmak.

Kullanım Alanı 1: Dinamik Yüklenen İçerikleri Takip Etme

Bu örnekte, sayfada dinamik olarak yüklenen içerikleri takip ediyor ve yeni içeriğin yüklenmesine karşılık olarak bir işlem gerçekleştiriyoruz.

const container = document.querySelector("#container");

// İçeriği dinamik olarak yükleme (örneğin, bir API çağrısı sonucu)
setTimeout(() => {
  const newContent = document.createElement("div");
  newContent.textContent = "Dinamik olarak yüklenen içerik";
  container.appendChild(newContent);
}, 1000);

// DOM'daki değişiklikleri izleyen geri çağırma fonksiyonu
function callback(mutations) {
  mutations.forEach((mutation) => {
    if (mutation.type === "childList") {
      console.log("Yeni içerik yüklendi!");
    }
  });
}

// Mutation Observer nesnesi oluşturma
const observer = new MutationObserver(callback);
observer.observe(container, { childList: true });

Kullanım Alanı 2: Öğe Özelliklerini İzleme ve Stil Değiştirme

Bu örnekte, bir öğenin özelliklerini izliyor ve özellik değişikliğine karşılık olarak öğenin stilini değiştiriyoruz.

const targetElement = document.querySelector("#target");

// Özellik değişikliği gerçekleştirme
setTimeout(() => {
  targetElement.setAttribute("data-active", "true");
}, 1000);

// DOM'daki değişiklikleri izleyen geri çağırma fonksiyonu
function callback(mutations) {
  mutations.forEach((mutation) => {
    if (mutation.type === "attributes" && mutation.attributeName === "data-active") {
      const isActive = targetElement.getAttribute("data-active") === "true";
      targetElement.style.backgroundColor = isActive ? "green" : "transparent";
    }
  });
}

// Mutation Observer nesnesi oluşturma
const observer = new MutationObserver(callback);
observer.observe(targetElement, { attributes: true });

Kullanım Alanı 3: Kullanıcı Etkileşimine Göre Öğeleri İzleme

Bu örnekte, kullanıcının bir düğmeye tıklamasıyla sayfada öğelerin eklenmesini veya kaldırılmasını izliyoruz.

onst container = document.querySelector("#container");
const button = document.querySelector("#button");

// Düğmeye tıklama işlemi
button.addEventListener("click", () => {
  const newItem = document.createElement("div");
  newItem.textContent = "Yeni öğe";
  container.appendChild(newItem);
});

// DOM'daki değişiklikleri izleyen geri çağırma fonksiyonu
function callback(mutations) {
  mutations.forEach((mutation) => {
    if (mutation.type === "childList") {
      console.log("Yeni öğe eklendi!");
    }
  });
}

// Mutation Observer nesnesi oluşturma
const observer = new MutationObserver(callback);
observer.observe(container, { childList: true});

Bu örneklerde, farklı kullanım alanlarına göre Mutation Observer ile DOM'daki değişikliklere nasıl tepki verebileceğimizi gösterdik. Bu örnekler sayesinde, web uygulamalarında DOM üzerinde gerçekleşen değişiklikleri izleyerek daha etkileşimli ve kullanıcı dostu deneyimler sunabiliriz.

Gerçek Dünya Örneği: Alışveriş Sepeti

Alışveriş sepetindeki ürünlerin izlenmesi ve toplam fiyatın ve toplam ürünlerin güncellenmesi gibi işlemler için Mutation Observer kullanabiliriz. Bu sayede, sepete eklenen veya çıkarılan ürünlerde, sayfadaki toplam fiyatı ve toplam ürünleri otomatik olarak güncelleyebiliriz.

HTML kodları:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alışveriş Sepeti Örneği</title>
</head>
<body>
    <h1>Alışveriş Sepeti</h1>
    <ul id="cart"></ul>
    <p id="total-items">Toplam Ürün: 0</p>
    <p id="total-price">Toplam Fiyat: 0.00 TL</p>
    <button id="add-product">Ürün Ekle</button>
    <script src="app.js"></script>
</body>
</html>

JavaScript (app.js) Kodları:

const cart = document.querySelector("#cart");
const totalItems = document.querySelector("#total-items");
const totalPrice = document.querySelector("#total-price");
const addProductButton = document.querySelector("#add-product");

// Ürün örnekleri
const products = [
  { name: "Ürün A", price: 49.99 },
  { name: "Ürün B", price: 29.99 },
  { name: "Ürün C", price: 19.99 },
];

// Sepete ürün ekleme işlemi
function addToCart(product, price) {
  const item = document.createElement("li");
  item.textContent = product;
  item.dataset.price = price;

  const removeButton = document.createElement("button");
  removeButton.textContent = "Çıkar";
  removeButton.onclick = () => {
    removeFromCart(item);
  };
  item.appendChild(removeButton);

  cart.appendChild(item);
}

// Sepetten ürün çıkarma işlemi
function removeFromCart(item) {
  cart.removeChild(item);
}

// DOM'daki değişiklikleri izleyen geri çağırma fonksiyonu
function callback(mutations) {
  mutations.forEach((mutation) => {
    if (mutation.type === "childList") {
      updateTotalItems();
      updateTotalPrice();
    }
  });
}

// Toplam ürün sayısını güncelleme işlemi
function updateTotalItems() {
  totalItems.textContent = `Toplam Ürün: ${cart.children.length}`;
}

// Toplam fiyatı güncelleme işlemi
function updateTotalPrice() {
  let sum = 0;
  Array.from(cart.children).forEach((item) => {
    sum += parseFloat(item.dataset.price);
  });
  totalPrice.textContent = `Toplam Fiyat: ${sum.toFixed(2)} TL`;
}

// Mutation Observer nesnesi oluşturma
const observer = new MutationObserver(callback);
observer.observe(cart, { childList: true });

// Ürün ekleme düğmesi işlemi
addProductButton.addEventListener("click", () => {
  const randomProduct = products[Math.floor(Math.random() * products.length)];
  addToCart(randomProduct.name, randomProduct.price);
});

Bu örnekle, HTML'de bir alışveriş sepeti, toplam ürün sayısı ve toplam fiyat bilgisi oluşturduk. JavaScript ile ürün ekleme işlemini gerçekleştiren bir buton ekledik ve her ürün için ürüne özel çıkarma butonu oluşturduk. Bu sayede, kullanıcıların sepete ürün eklemelerine ve istedikleri ürünü çıkarmalarına olanak sağladık. Mutation Observer kullanarak, sepetteki ürün sayısını ve toplam fiyatı otomatik olarak güncelledik.

Sonuç

JavaScript'te Mutation Observer, DOM üzerinde gerçekleşen değişiklikleri izlemek ve bu değişikliklere dinamik olarak tepki vermek için güçlü bir araçtır. Bu rehberde, Mutation Observer'ın temel kullanımını ve gerçek dünya örneklerini inceledik. Umarım bu rehber, Mutation Observer kavramını ve kullanım alanlarını daha iyi anlamanıza yardımcı olmuştur. JavaScript öğrenmeye ve geliştirmeye devam edin ve harika uygulamalar oluşturun!