AngularでMutationObserverの使い方

AngularでMutationObserverの使い方

MutationObserverの使い方を忘れるのでメモです。

引数はひとつで、コールバック関数です。このコールバック関数は、DOMが変更されたタイミングで実行されます。

コールバック関数の引数は

  • 第一引数は、MutationRecord[](省略可)
  • 第二引数は、MutationObserver(省略可)

以下はMutationObserverインスタンス生成例です。

このインスタンスにはobserve()メソッドがあり、このメソッドでDOMの変更検知をします。

observeの引数は

  • 第一引数は、監視したいノード(Node)
  • 第二引数は、オプション(参考サイト

となります。

DOMが変更する種類はオプションで指定でき、例えば属性やスタイルなどが変わったらその変更検知をすることが可能です。

disconnect()というメソッドがあり、監視を終了させるメソッドです。

サンプル

このサンプルではMutationObserverはhref属性の変更を監視し検知します。

ボタンが配置してあり、ボタンをクリックしてhref属性を変更しています。その時に検知されるかどうかを確認しているだけです。

こんな感じです。

AngularでMutationObserverの使い方

TypeScriptでMutationObserverの使い方

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA