【JavaScript】MutationObserverでDOM変化を監視する方法｜属性・子要素・非同期バッチ・無限ループ対策まで

// 監視対象の要素
const target = document.getElementById("content");

// 変化があったときに呼ばれるコールバック
const callback = (mutationsList, observer) => {
  for (const mutation of mutationsList) {
    if (mutation.type === "childList") {
      console.log("子要素の追加・削除が検出されました");
    }
    if (mutation.type === "attributes") {
      console.log("属性が変更されました:", mutation.attributeName);
    }
  }
};

const observer = new MutationObserver(callback);

// オプションを指定して監視開始
observer.observe(target, {
  childList: true,   // 子要素の追加・削除
  attributes: true,  // 属性の変更
  subtree: true,     // 子孫まで対象に含める
});

const target = document.getElementById("box");
const observer = new MutationObserver(() => console.log("変更検出"));
observer.observe(target, { childList: true });

target.appendChild(document.createElement("p"));
target.appendChild(document.createElement("p"));
console.log("同期処理おわり");

// 出力:
// 同期処理おわり   ← 先に出る
// 変更検出         ← 2回分の変更がまとまって、後から1回

const list = document.getElementById("list");

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    for (const node of mutation.addedNodes) {
      // 要素ノードで li のものだけ処理
      if (node.nodeType === 1 && node.matches("li")) {
        console.log("新しいリスト項目:", node.textContent);
      }
    }
  }
});

observer.observe(list, { childList: true });

const box = document.querySelector(".box");

const observer = new MutationObserver((mutations) => {
  for (const m of mutations) {
    if (m.type === "attributes") {
      const newValue = box.getAttribute(m.attributeName);
      console.log(`${m.attributeName}: ${m.oldValue} → ${newValue}`);
    }
  }
});

observer.observe(box, {
  attributes: true,
  attributeOldValue: true,     // 変更前の値を m.oldValue に記録
  attributeFilter: ["class"],  // class 属性だけ監視
});

// 保留中の変更を取り出して処理（disconnect 直前のフラッシュなどに）
const pending = observer.takeRecords();
if (pending.length) {
  // pending を処理...
}

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

const observer = new MutationObserver(() => {
  observer.disconnect();                 // いったん監視を止める
  target.appendChild(document.createElement("div")); // 自分でDOMを変更
  observer.observe(target, { childList: true }); // 監視を再開
});

observer.observe(target, { childList: true });