MutationObserver

// ── MutationObserver: DOM の変更を監視する ─────────────
// テキスト変更・属性変更・子要素の追加/削除を監視できる

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      // 子要素の追加・削除を検出
      mutation.addedNodes.forEach(node => {
        console.log('要素が追加された:', node);
      });
      mutation.removedNodes.forEach(node => {
        console.log('要素が削除された:', node);
      });
    }
    if (mutation.type === 'attributes') {
      // 属性の変更を検出
      console.log('属性が変更された:', mutation.attributeName);
    }
    if (mutation.type === 'characterData') {
      // テキストの変更を検出
      console.log('テキストが変更された');
    }
  });
});

// 監視対象と設定を指定して開始
const target = document.querySelector('#app')!;
observer.observe(target, {
  childList: true,  // 子要素の追加・削除を監視
  subtree: true,    // 子孫要素も全て監視
  attributes: true, // 属性の変更を監視
  characterData: true, // テキスト内容の変更を監視
});

// 監視を停止
observer.disconnect();