javascript MutationObserverを使ってDOMの監視を行う

javascript MutationObserverを使ってDOMの監視を行う

javascriptで、MutationObserverを使ってDOMの監視を行うサンプルコードを記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

MutationObserver使い方

MutationObserverを使用すると、DOMの監視を行うことが可能です。

configに指定するオプションは以下となります。

オプション内容
childListtrue / false子ノード(テキストノードも含む)の変化を
監視する場合はtrue
attributestrue / false属性に対する変更を監視する場合はtrue
characterDatatrue / falseデータに対する変更を監視する場合はtrue
subtreetrue / false子孫ノードの変化を監視する場合はtrue

サンプルコード

以下は、
「テキスト変更」をクリックすると、指定した監視対象の要素のテキストを変更して、監視時に実行される処理をカウントする
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。

変更された回数だけ実行されているが確認できます。