MutationObserver

DOMの変更を監視する

特定の要素が変更された時に、callbackを発火させる

例

code:js

// observerの作成

const observer = new MutationObserver(mutations => {

// targetに変更が発生した時に、このcallbackが発火する

mutations.forEach(mutation => {

console.log(mutation.type);

});

});

// observeする. 適当にoptionを指定できる

const targetNode = document.getElementById("target");

observer.observe(targetNode, {

childList: true, // 子ノードの追加・削除を監視

attributes: true, // 属性の変更を監視

subtree: true, // 子孫ノードも監視対象にする

});

observer.observer()

observer.disconnect()

監視の停止

ユースケース例

formのvalidation

formの中身を監視してvalidaiton

リアルタイム検索

formの中身を監視して検索

SPAのnavigation

ページの遷移を監視して、fetchとか

formの中身を監視してfetch