【コピペ可】DOMの変更を監視できるjavascriptスニペット

2022年5月3日2022年5月24日

DOMの変更を監視できるAPI（MutationObserverAPI）のスニペットを紹介します。これによって、ajaxでコンテンツをDOMに挿入したタイミングに連動してなんらかの処理を行ったりすることができます。

DOMの変更を監視するスニペット

var observer = new MutationObserver(function (mutations) {
    // observer.disconnect(); // 監視を終了
    console.table(mutations);
});
// 監視を開始
observer.observe(target, {
    attributes: true, // 属性変化の監視
    attributeOldValue: true, // 変化前の属性値を mutations.oldValue に格納する
    characterData: false, // テキストノードの変化を監視
    characterDataOldValue: false, // 変化前のテキストを mutations.oldValue に格納する
    childList: false, // 子ノードの変化を監視
    subtree: false // 子孫ノードも監視対象に含める
});