突然変異オブザーバーは、DOMの変更を監視するためのインターフェイスです。 DOMオブジェクトツリーに変化がある場合、突然変異オブザーバーに通知されます。この記事では、新しいHTML5特徴の変異オブザーバーに基づいて、エディターの元に戻すおよびフォールバック操作を共有します。興味のある友人は、MutationObserverの導入について言及します。
MutationObserverは、特定の範囲内のDOMツリーが変更されたときに適切に対応する能力を開発者に提供します。 APIは、Dom3イベント仕様で導入された突然変異イベントを置き換えるように設計されています。
突然変異オブザーバーは、DOMの変更を監視するためのインターフェイスです。変異オブザーバーは、DOMオブジェクトツリーに変更が発生したときに通知されます。
突然変異オブザーバーには次の機能があります。•すべてのスクリプトタスクが実行される前に完了するのを待ちます。つまり、非同期メソッドを使用します。
•DOMの変更を個別に処理するのではなく、DOMの変更レコードを処理用の配列にカプセル化します。
•DOMノードで発生するすべての変更を観察したり、特定のタイプの変更を観察したりできます。
MDN情報:MutationObserver
MutationObserverはコンストラクターであるため、作成するときは新しいMutationObserverを使用する必要があります。
インスタンス化されたMutationObserverの場合、コールバック関数が必要です。これは、指定されたDOMノード(ターゲットノード)が変更されたときに呼び出されます。
呼び出されると、オブザーバーオブジェクトは関数に2つのパラメーターを渡します。
1:最初のパラメーターは、いくつかのMutationRecordオブジェクトを含む配列です。
2:2番目のパラメーターは、オブザーバーオブジェクト自体です。
例えば:
コードをコピーします