2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

DOMの監視をJavascriptでやる方法

Last updated at Posted at 2020-12-23

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の変化を監視する方法

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?