50

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

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

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

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

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

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

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

4

6 に答える 6

36

これを最新のものにするために、DOM4 標準では Mutation Events を廃止し、Mutation Observer に置き換えています: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

于 2014-03-06T21:09:33.420 に答える
10

http://www.quirksmode.org/js/events/DOMtree.html

jQuery は、セレクターに対応する既存および将来の要素にイベントをアタッチする方法をサポートするようになりました: http://docs.jquery.com/Events/live#typefn

別の興味深い発見 - http://james.padolsey.com/javascript/monitoring-dom-properties/

于 2010-03-16T19:46:31.900 に答える
8

ミューテーション イベントは、探しているものの W3 推奨事項です。

それらがすべてサポートされているかどうかはわかりません..（IEはおそらくそれらをサポートしていません..）

于 2010-03-16T18:34:38.503 に答える
1

DOMNodeInserted および DOMNodeRemoved イベントを使用してみることができます。Quirksmode によると、ほとんどのブラウザで機能しますが、IE は例外です...

http://www.quirksmode.org/dom/events/index.html

于 2010-03-16T18:35:43.523 に答える
1

私は最近、まさにそれを行うプラグインを作成しました - jquery.initialize

.each関数と同じように使用します

$(".some-element").initialize( function(){
    $(this).css("color", "blue"); 
});

との違い.eachは、この場合は.some-elementセレクターを使用し、将来このセレクターで新しい要素が追加されるのを待つことです。そのような要素が追加されると、それも初期化されます。

私たちの場合、初期化関数は要素の色を青に変更するだけです。したがって、次のような新しい要素を追加する場合 (ajax または F12 インスペクターなどを使用するかどうかに関係なく):

$("<div/>").addClass('some-element').appendTo("body"); //new element will have blue color!

プラグインは即座に初期化します。また、プラグインは、1 つの要素が 1 回だけ初期化されるようにします。したがって、要素を追加.deatch()してから本体から追加してから再度追加すると、再度初期化されることはありません。

$("<div/>").addClass('some-element').appendTo("body").detach()
    .appendTo(".some-container");
//initialized only once

プラグインのベース- IE9 および 10 で動作し、 readme ページMutationObserverに詳細が記載されている依存関係があります。

于 2015-02-06T17:06:54.647 に答える
0

jQuery Mutateもこれを行います。デフォルトでは、likeheight, width, scrollHeightなどをサポートしていますが、テキストが変更されたかどうかを確認するなどの新しいイベントを追加するために、少し余分なコードを追加して拡張することもできます。

http://www.jqui.net/jquery-projects/jquery-mutate-official/

それが役に立てば幸い

于 2013-01-10T15:49:49.827 に答える