IT業界の技術をメモ・情報公開できる

MutationObserver (DOMに変更があった瞬間だけコールバック)

登録日:2026-01-16   
JS @ms
MutationObserver は 常に監視し続けているわけではありません。
・setInterval のように「定期ポーリング」しない
・DOMに変更があった瞬間だけ コールバックが呼ばれる
・ブラウザ内部の DOM変更フックで動く(イベント駆動)

const init = (el) => {
if (el.dataset.lottieInitialized === '1') return;
el.dataset.lottieInitialized = '1';

console.log('test');
};


const observer = new MutationObserver(() => {
document.querySelectorAll('.ai-thinkloging').forEach(init);
});

observer.observe(document.body, { childList: true, subtree: true });

//補足
childList: true 子要素の追加・削除 低
subtree: true body配下すべて 中
attributes: true 属性変更監視 中〜高
characterData: true テキスト変更 高

一覧に戻る