問題タブ [mutation-observers]

DOM への変更を検出するための効率的なメカニズムが必要です。できればクロスブラウザですが、クロスブラウザ以外で有効な手段があれば、フェールセーフなクロスブラウザ方式で実装できます。

特に、ページ上のテキストに影響を与える変更を検出する必要があるため、新しい要素、削除された要素、変更された要素、または内部テキスト (innerHTML) の変更が必要になります。

行われる変更を制御することはできません (サードパーティの JavaScript インクルードなどが原因である可能性があります)。この角度からアプローチすることはできません。何らかの方法で変更を「監視」する必要があります。

現在、定期的にチェックする「quick'n'dirty」メソッドを実装しましたbody.innerHTML.length。もちろん、これは同じ長さが返される変更を検出しませんが、この場合は「十分」です。これが発生する可能性は非常に低く、このプロジェクトでは、変更の検出に失敗することはありません。失われたデータで。

問題body.innerHTML.lengthは、それが高価なことです。高速なブラウザでは 1 ～ 5 ミリ秒かかることがあります。これにより、動作が大幅に遅くなる可能性があります。また、膨大な数の iframe を扱っているため、すべてが加算されます。これを行うことのコストが高いのは、innerHTML テキストがブラウザーによって静的に保存されず、読み取るたびに DOM から計算する必要があるためだと確信しています。

私が探している答えの種類は、「正確」(イベントなど) から「十分に良い」ものまで、おそらく innerHTML.length メソッドのように「クイックアンドダーティ」なものですが、より高速に実行されます。

編集:変更された正確な要素を検出することは「良い」ことですが、絶対に必要というわけではありません.変更があったという事実だけで十分です. これにより、人々の反応が広がることを願っています。Mutation Events を調査する予定ですが、IE サポートのフォールバックがまだ必要です。

html に div または input が追加されたときに関数を実行したい。これは可能ですか？

たとえば、テキスト入力が追加されたら、関数を呼び出す必要があります。

DOM要素がページに追加されたときに実行するように選択した関数が必要です。これはブラウザ拡張機能のコンテキストであるため、Webページは私とは独立して実行され、そのソースを変更することはできません。ここでの私のオプションは何ですか？

理論setInterval()的には、要素の存在を継続的に検索し、要素が存在する場合はアクションを実行するために使用できると思いますが、より良いアプローチが必要です。

このコードはFirefoxで完全に機能しています。

しかし、Chromeでは機能しません。myDiv に何かが起こるたびにイベントがトリガーされるようにします。（削除、CSSの変更、すべて）。

回避策はありますか？

通常の DOM 変更 (Web ページ自体による) と異常な DOM 変更 (攻撃者による) をどのように区別しますか?

javascriptのミューテーションイベントで仕方がありませんでした。出来ますか？

新しいMutation Observer機能を使用して、選択ボックス (またはネストされたoption要素)への変更を監視しようとしています。ただし、「setAttribute」のみがミューテーションオブザーバーのコールバックをトリガーしています。

私が使用しているコードは次のとおりです。

そして、これが実際のこのコードですhttp://jsfiddle.net/gryzzly/wqHn5/

selected属性 ( on<option>またはvalueon ) の変更に反応したいと思います<select>。オブザーバーが反応しない理由についての提案は大歓迎です!

Mac OS X の Chrome 18.0.1025.168 でこれをテストしています。もちろん、製品コードにmozはコンストラクターのプレフィックスとプレフィックスのないバージョンも含まれます。これはテスト コードです。

アップデート。

Firefox Nightly でもコードをテストしたところ、Chrome や Chrome Canary と同じように動作します。両方のブラウザのバグを埋めました:

• https://bugzilla.mozilla.org/show_bug.cgi?id=757077
• https://code.google.com/p/chromium/issues/detail?id=128991

この問題が煩わしい場合は、これらのバグにコメントして投票してください。

このhttp://lists.w3.org/Archives/Public/public-webapps/2011JulSep/1622.htmlを読んでいますが、Chromeの動作は仕様とは対照的であるようです。仕様を正しく理解していれば、要素の「サブツリー」を定義すると、その要素のサブツリー（要素自体を含む）への変更を報告する必要があります。ただし、このコードを実行しても何も得られません。

私は何が欠けていますか？誰かがこれについて詳しく説明できますか？ありがとう！

W3C は、Mutation Event API を置き換える MutationObserver API を提案しています。詳細はこちら: http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers .

新しい API について初心者向けの質問があります

1. MutationRecord で、previousSibling と nextSibling の目的は何ですか? 複数の addedNodes と removedNodes の場合、それらはどこを指しますか?
2. 追加されたノードと削除されたノードが複数ある場合、それらが発生した順序をどのように判断しますか?
3. addedNodes と removedNodes に同じノードを含めることはできますか? たとえば、ノードが追加され、すぐに削除されますか? はいの場合、ノードが追加され、削除され、再度追加されたなど、同じノードが任意のカテゴリで複数回表示される可能性がありますか? はいの場合、上記の 2 番目の質問がより適切になります。

参考までに、これらの API は Firefox と Webkit ナイトリー ビルドに表示されたばかりです (Chrome に存在することに加えて)。

ありがとう、スニル

グーグルで答えが見つかりませんでした。

この機能で利用できるクロスブラウザ互換性マトリックスはありますか？

誰かが答えを知りたい場合は、ここにあります：ミューテーションオブザーバーとミューテーションイベント/ブラウザの可用性。

私はChrome19を使用しており、新しいミューテーションオブザーバーオブジェクトを作成しました。

そして私は観察します：

この設定は、ノードを挿入または削除したり、ノードのテキストを変更したりした場合にのみトリガーされるようです。要素の属性またはインラインCSSスタイルを変更してもトリガーされません。どうしてこれなの？