HTML5 機能の突然変異 Observer_html/css_WEB-ITnose

前書き

先週、ビジネス アプリのページが乗っ取られたのを見て、その方法を共有した Shi Yulei @ Tencent が 2 つの共有を思い出しました。 2 番目の質問は、友人のサークルで @sugarcake が共有したプランを見たということです。 これら 2 つを組み合わせることで、今日のこの API の共有が実現しました。 @ Grassroots Programmer のブログ投稿に感謝します。質問は記事の最後で解決します！ ！

ここから本文です~

1. 概要

Mutation Observer は DOM の変更を監視するためのインターフェースです。 DOM オブジェクト ツリーに変更が発生すると、Mutation Observer に通知されます。

概念的には、それはイベントに非常に近いです。 DOM が変更されると、Mutation Observer イベントがトリガーされることがわかります。ただし、イベントとは根本的に異なります。イベントは同期的にトリガーされます。つまり、DOM が変更されると、対応するイベントが即座にトリガーされますが、Mutation Observer は、DOM が変更された後、すぐにはトリガーされませんが、非同期的にトリガーされます。現在の DOM 操作がすべて完了してからトリガーされるまで待ちます。

これは、頻繁な DOM 変更に対処するように設計されています。たとえば、ドキュメントに 1000 個の段落 (p 要素) を連続して挿入すると、1000 個の挿入イベントが連続してトリガーされ、各イベントのコールバック関数が実行されます。これにより、ブラウザがフリーズする可能性が高くなります。Mutation Observer とはまったく異なります。 1000 段落すべてが挿入された後でのみ、一度だけトリガーされます。

注: コンソールでログを確認できます。

Mutation Observer には次の特性があります:

• すべてのスクリプト タスクが完了するのを待機します。を実行する前に、つまり、DOM 変更を 1 つずつ個別に処理するのではなく、DOM 変更レコードを処理用の配列にカプセル化する非同期メソッド

• を使用します。

• DOM ノードで発生するすべての変更を監視することも、特定の種類の変更を監視することもできます

現在、Firefox(14 以降) )、Chrome(26 以降)、Opera(15 以降)、IE(11 以降)、および Safari(6.1 以降) がこの API をサポートしています。 Safari 6.0 および Chrome 18 ～ 25 がこの API を使用する場合、WebKit プレフィックス (WebKitMutationObserver) を追加する必要があります。次の式を使用して、ブラウザがこの API をサポートしているかどうかを確認できます。

2.

の使い方 まず、MutationObserver コンストラクターを使用して新しいインスタンスを作成し、このインスタンスのコールバック関数を指定します。

2.1 オブザーバー メソッド

オブザーバー メソッドは、監視する DOM 要素と監視する特定の変更を指定します。

上記のコードは、まず監視対象の DOM 要素が Article であることを指定し、次に監視対象の変更が子要素の変更と属性の変更であることを指定しています。最後に、これら 2 つの条件をパラメーターとしてオブザーバー オブジェクトのオブザーバー メソッドに渡します。

MutationObserver (つまり、上記のコードのオプション オブジェクト) によって監視される DOM の変更には、次のタイプが含まれます。

• childList: 子要素の変更

• 属性: 属性の変更

• CharacterData: ノードのコンテンツまたはノード テキストの変更

• サブツリー: すべて従属ノード (子ノードの変更および子ノードの子ノードを含む)

どのような変更を監視したい場合は、オプションオブジェクトでその値を true に指定します。サブツリーの変更は単独では観察できず、childList、attribute、characterData のうち 1 つ以上を同時に指定する必要があることに注意してください。

変更タイプに加えて、オプション オブジェクトは次の属性も設定できます:

• attributeOldValue: 値は true または false。 true の場合、変更前の属性値を記録する必要があることを意味します。

• characterDataOldValue: 値は true または false です。 true の場合、変更前のデータ値を記録する必要があることを意味します。

• attributesFilter: 値は配列であり、監視する必要がある特定の属性 (['class'、'str'] など) を表します。

2.2detachメソッドとtakeRecordメソッド

のdisconnectメソッドは観測を停止するために使用します。対応する変更が発生すると、コールバック関数は呼び出されなくなります。

takeRecord メソッドは、変更レコードをクリアするために使用されます。つまり、未処理の変更は処理されなくなります。

2.3 MutationRecord オブジェクト

DOM オブジェクトが変更されるたびに、変更レコードが生成されます。この変更レコードは、変更に関連するすべての情報を含む MutationRecord オブジェクトに対応します。 Mutation Observer は、処理される突然変異オブジェクトの配列です。

MutationRecord オブジェクトには DOM 関連の情報が含まれており、次の属性があります:

• type: 観察された変更のタイプ (属性、characterData または childList)。

• ターゲット: 変更された DOM オブジェクト。

• addedNodes: 新しく追加された DOM オブジェクト。

• RemoveNodes: DOM オブジェクトを削除しました。

• PreviousSibling: 前の兄弟の DOM オブジェクト、または存在しない場合は null。

• nextSibling: 次の兄弟の DOM オブジェクト。存在しない場合は null を返します。

• attributeName: 変更された属性。 attributeFilter が設定されている場合、事前に指定された属性のみが返されます。

• oldValue: 変更前の値。この属性は、属性およびcharacterDataの変更に対してのみ有効です。childListが変更されると、nullが返されます。

3. 例

3.1 子要素の変更

次の例は、変更レコードを読み取る方法を示しています。

上記のコードのオブザーバーは、body 要素のすべての下位要素の変更を監視します (childList は子要素を監視することを意味し、subtree は子要素の下位要素を監視することを意味します)。コールバック関数は、変更されたすべてのタイプとターゲット要素をコンソールに表示します。

3.2. 属性の変更

次の例は、属性の変更を追跡する方法を示しています。

上記のコードは、最初に追跡属性の変更 ('attributes':true) を設定し、次に変更を記録する前に値を設定します。実際に変更が発生すると、コンソールには変更前の値が表示されます。

追記

詳細については、MDN を参照してください: https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

概要この記事

著者: @ Grassroots Programmer

元のリンク: http://www.cnblogs.com/jscode/p/3600060.html

昨日、読みました早い段階で 3 つの質問がありました。@豆诇儿翔さんが @小Lucky さんの質問に答えてくれました。ありがとうございました。

@小ラッキー。 ：インターンとして入社して2ヶ月ですが、学校を出たばかりでスキルも経験も浅いので、フロントエンドは少し好きになり始めましたが、もう好きではありません。この状況ではどうすればよいでしょうか?

@豆奶(華農大学、Baidu フロントエンド インターン): 私は 2 か月間インターンをしていますが、時々このアイデア +1 があります。実はこの状況を整理すると、おそらく2つのポイントがあると思います。 1つは、入社したばかりの新鮮味がなくなり、毎日業務を行っていると退屈でやりたくなくなるということ、もう1つは、業務で知らないことが多すぎるということかもしれません。 、自分の技術レベルに疑問があり、さらなる勉強のためにインターンシップに戻りたいと考えています。 私自身の解決策は、週末にやりたいことをして、ビジネスのことは後回しにして、フロントエンドの楽しみを見つけることです。たとえば、アニメーションを描いたり、共有されているブログを読んでその中の質問を練習したり、面接の質問や筆記試験の質問を見つけて何が分からないのかを調べて勉強したり...その後、自分の体に鶏の血を 1 杯入れてみましょう。月曜日に仕事に行くときに、「よし！」と思えるように、コードを上手に入力してください。今週も頑張ってください！さて