DOMノードの変更にMutationObserver APIを使用する方法

シナリオは次のとおりです。雑誌の作家であるRitaが彼女の記事をオンラインで編集しています。彼女は自分の変更を保存してメッセージを見る “変更が保存されました!” ちょうどその時、彼女は彼女が逃したタイプミスに気づく。彼女はそれを修正してクリックしようとしています “保存する”, 彼女が上司から怒った電話を受けたとき.

電話が終わった後、彼女は画面に戻り、 “変更が保存されました!” 彼女のコンピュータをシャットダウンし、オフィスから暴風雨.

私が物語を語ることができなかったこととは別に、その短いシナリオから、その永続的なメッセージがどのような問題を引き起こしたのかに気づいた。そのため、将来的には可能な限りそれを回避し、クリックすることでユーザーに確認を促すものを使用することにします - または 自力で消えます. 2番目のメッセージをクイックメッセージに使用することをお勧めします。.

ページから要素を消す方法はすでにわかっているので、それは問題にはならないはずです。知る必要があるのは いつ現れましたか? だから私たちはそれをもっともらしい時間の後に消えるようにできる.

MutationObserver API

全体として、DOM要素（メッセージのようなもの） div）または他のノードの変更があれば、それを知ることができるはずです。ネイティブAPIがないため、長い間開発者はハックとフレームワークに頼らなければなりませんでした。しかしそれは変わった.

私たちは今 MutationObserver （以前の突然変異イベント）. MutationObserver 一連のプロパティとメソッドを持つJavaScriptネイティブオブジェクトです。それは私たちをさせる 任意のノードで変化を観察する DOM要素、文書、テキストなどのように。 ノードの追加または削除、およびノー​​ドの属性とデータへの変更.

わかりやすい例を見てみましょう。まず、Ritaが見たように、ボタンをクリックしたときにメッセージが表示される場所を設定します。それでは ミューテーションオブザーバを作成してそのメッセージボックスにリンクする そして メッセージを自動的に隠すロジックをコーディングする. 精通した?

注意：あなたはある時点であなたの頭の中で私に尋ねた “JavaScriptでボタンクリックイベント自体の内側からメッセージを隠すだけではどうでしょうか。?” 私の例では、私はサーバーを操作していません。そのため、もちろんクライアントはメッセージを表示する責任があり、メッセージを簡単に隠すことができます。しかし、Ritaの編集ツールのように、サーバーがDOMコンテンツを変更することを決定したものである場合、クライアントは警戒して待つことしかできません。.

まず、ボタンクリックでメッセージを表示するための設定を作成します。.

 メッセージを表示

var msg = document.querySelector（ '＃msg'）、SUCCESSMSG = "変更が保存されました！"; / *ボタンクリックイベントを追加します* / document .querySelector（ 'button'）.addEventListener（ 'click'、showMsg）; function showMsg（）msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

初期設定を実行したら、次の操作を行います。

• を作成 MutationObserver ユーザー定義のコールバック関数を持つオブジェクト（この関数は後ほど定義されています）。この関数は、によって観察されたすべての突然変異に対して実行されます。 MutationObserver.
• によって観察される突然変異の種類を指定するconfigオブジェクトを作成します。 MutationObserver.
• バインドする MutationObserver ターゲットへの 'msg' div この例では.

（function startObservation（）var / * 1）MutationObserverオブジェクトを作成する* / observer = new MutationObserver（function（mutation）mutationObserverCallback（mutation）;）、/ * 2）設定オブジェクトを作成する* / config = childList： true; / * 3）すべての接着剤* / observer.observe（msg、config）; （）; 

以下は、のプロパティのリストです。 設定 さまざまな種類の突然変異を識別するオブジェクト。この例では、メッセージテキスト用に作成された子テキストノードのみを扱うので、 childList 財産.

観察された変異の種類

さて、観察されたすべての突然変異で実行されるそのコールバック関数へ.

function mutationObserverCallback（mutation）/ *最初の変異を取得する* / var mutationRecord = mutation [0]; / *子ノードが追加された場合、2秒後にmsgを非表示にする* / if（mutationRecord.addedNodes [0]！== undefined）setTimeout（hideMsg、2000）;関数hideMsg（）msg.textContent = "; msg.style.background = 'none'; 

メッセージを追加するだけなので div, 最初に見つかった突然変異を取得して、テキストノードが挿入されたかどうかを確認します。複数の変更が発生した場合は、ループを繰り返し実行できます。 突然変異 アレイ.

のすべての突然変異 突然変異 配列はオブジェクトで表されます 突然変異記録 以下の特性を持つ.

の特性 突然変異記録

以上です。最後のステップでは、コードをまとめるだけです。.

ブラウザのサポート

参照

• “W3C DOM4ミューテーションオブザーバ.” W3Cウェブ。 2015年6月19日
• “MutationObserver.” Mozilla開発者ネットワーク。ウェブ。 2015年6月19日.