DOMによるWeb Application Clientの可能性

何故僕は、こんなに便利な機能を使っていなかったのだ

        「知らなかったからさ」

確かに最近のWeb APIの進歩は目を見張るものがあります。半年もほっておくと、見たことも聞いたこともないAPIが、既に実用レベルとなっていることもあります。

しかし、このコンテンツで紹介しようとしているAPIは、何とあのInternet Explorer 11でさえサポートしています。

何年ほっておいたのでしょうか。

MutationObserverという、DOMの変化を監視するAPIのご紹介です。

DOMの変化をどうしても知りたい

要素のテキスト変化を監視する

最近のJavascriptは非同期のAPIが多くなったために、複数の非同期APIが関わる複雑な処理を実装することも多くなりました。

この様な処理では、最終的に終了したタイミングを知ることが難しいことがあります。

しかし、その複雑な処理が、最終的にどこかの要素に処理結果を設定するのであれば、その要素を監視すれば処理の終了を知ることができます。

下記の例では、複雑な処理の代わりにタイマで処理結果を設定させています。

処理結果が設定された時点で、その旨を「結果表示 =>」の後に表示します。

監視の対象は、IDがsample_text_targetの要素です。4行目で初期化し18行目で監視を開始しています

監視の開始で第2引数として渡しているconfigが、監視する内容です。

ここで指定しているchildListは、テキストノードも含む子ノードの変更を監視させる指示です。

childListは、直接の子ノードのみを監視するので、孫ノードなどの変更は監視しません。子孫ノードを全て監視する場合は、subtreeを指定します。

コールバック関数の中で、disconnect()を呼び監視を終了しています。監視を始めると、わずかですがマシンの負荷が上がるので、内部的には永久ループによる処理を行っているものと思われます。

ページをloadした時点で監視を開始して、unloadまで続けるといった使い方よりは、都度都度で監視を開始/終了するような使い方のほうが合っている気がします。

一つだけであれば問題となるほどの負荷ではありませんが、複数の監視を同時に実行すると、その分負荷が高まります。

結果表示 => 

要素のサイズ変化を監視する

要素のサイズ変更のタイミングを知りたいことはよくあるのですが、通常の要素はresizeイベントを発火しないので、いろいろなハックが出回っています。

MutationObserverを使えば、簡単に知ることができます。但し、その要素のインラインスタイルを変更した場合に限られます。

下記例では、7行目style属性の内容を変更して、横幅を変えています。

インラインスタイルの変更を監視するためには、attributesを指定します。

この例では、コールバック関数は変更のタイミングを知るためだけに使用しています。

監視対象のどの属性が変更となっても呼び出されるので、想定のものが変更されたかをチェックしています。

結果表示 => 

attributesを使って監視できるのは、あくまでもDOM上の属性が変更されたかどうかなので、その要素のJavascript上のプロパティ()

要素の色の変化を監視する

これは、サイズの監視とほぼ同じです。

結果表示 => 

なんでも監視できるのか?

classNametitleといった、直接DOMの属性が変更されるものは監視の対象ですが、イベントハンドラなどの設定は対象外のようです。

次の例のように、イベントハンドラを設定しても、検知されません。但し、設定後はマウスでクリックすると、ダイアログは表示されます。

コードにバグがないことを祈るばかりです...

結果表示 => 

ご意見・ご質問