DOMの監視をJavascriptでやる方法 #JavaScript

MutationObserverを使うことでやりたかったことができた。

以下DOMを監視して変化したときに関数を実行したい。



//監視対象のDOM
<p id="target">2020-12-23 11:00</p>

//監視ターゲットの取得
const target = document.getElementById('target')

// オブザーバーの作成
const observer = new MutationObserver(records => {
    //実行したい処理
})

// 監視の開始
observer.observe(target, {
   //今回はtarget配下の要素が変化した時なのでchildListを指定
   childList:true
}

//アロー関数で書くことでもう少しコンパクトになった
new MutationObserver(() => {
      //実行したい処理
    })
.observe(target, {childList: true});

参考

JavaScriptのMutationObserverでDOMの変化を監視する方法