DOMの変更を監視/検出する最も効率的な方法？

StackOverflow https://stackoverflow.com/questions/2457043

質問

私は、DOMへの変更を検出するための効率的なメカニズムが必要です。好ましくはクロスブラウザが、のないのクロスブラウザいる任意の効率的な手段がありますならば、私はフェイルセーフのクロスブラウザの方法でこれらを実装することができます。

特に、私は、ページ上のテキストに影響を与える変化を検出する必要があるので、新しい、削除または内部テキスト（innerHTMLの）への要素、または変更を修飾が必要とされるであろう。

それはこの角度からアプローチすることはできませんので、変更が行われている上で

私がコントロールを持っていない、（彼らが原因含まjavascriptのサードパーティなどにすることができる） - 私は何とか変化を「監視」する必要があります<。 / P>

現在、私は間隔でbody.innerHTML.lengthをチェックする「quick'n'dirty」メソッドを実装しました。これはもちろん返される同じ長さになる変化を検出するが、この場合には「十分」ではありません - この出来事の可能性は非常にスリムであり、本プロジェクトでは、変化を検出するために失敗することは行われません内のデータを失っています。

body.innerHTML.lengthの問題は、それが高価であるということです。これは、の速いのブラウザで、1〜5ミリ秒を取ることができ、これは多くの事を行き詰まらすることができます - 私はまた、アイフレームの大っぽい数を扱うことだし、それはすべてのアップが追加されます。私はinnerHTMLのテキストは、ブラウザによって静的に保存されていないため、これを行うことが高価であるかなり確信している、とDOMからそれが読まれるたびに計算する必要があります。

innerHTML.length方法として「quick'n'dirty」が、その実行時に、おそらく何か -

私が探しています回答のタイプは、（例えば、イベントのための）「正確な」から「十分に良い」には何もあり速くています。

編集： 私もそれが修正された正確な要素を検出するために、「素敵」となりながら、それが絶対的に必要ではないことを指摘すべきである - ちょうどがあったという事実のいずれかのの変更は十分だろう。うまくいけば、この人の回答を広げます。私は、変異イベントを調査するつもりですが、私はまだIEのサポートのためのフォールバックが必要なので、任意の、奇抜創造、外の-平方アイデアは非常に歓迎されるでしょう。

他のヒント

日付にこれを起動するには、DOM4標準は、変異イベントに離れないと変更オブザーバーに置き換えます：<のhref = "https://developer.mozilla.org/en-US/docs/Web/API/ MutationObserver "> https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver の

するあなたが探しているもののW3推奨されている..

わからない彼らはすべての周りにサポートされている場合..（IEが最も可能性が高いそれらをサポートしません。）

あなたはDOMNodeInsertedとDOMNodeRemovedイベントを使用して試みることができます。 Quirksmodeた内容に応じて、彼らは一種のIEの顕著な例外を除いて、ほとんどのブラウザでは動作...

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

私は最近、まさにそのプラグインを書いた - 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!

プラグインは、即座にそれを初期化します。また、プラグインは必ず一つの要素が一度だけ初期化されます。あなたは要素を追加するのであれば、それは再初期化されることはありません、そして身体からそれを.deatch()し、再度追加します。

$("<div/>").addClass('some-element').appendTo("body").detach()
    .appendTo(".some-container");
//initialized only once
プラグインがMutationObserverに基づいています。

- それは READMEページに説明するように、依存関係IE9と10上で動作します。

の jQueryののに変異し、これを行いますあまりにも、デフォルトではheight, width, scrollHeightなどのようにサポートしています...しかし、テキストが変更された場合、それにも見られるような新しいイベントを追加するために余分なコードを少しして拡張することができる等...

http://www.jqui.net/jquery-projects/jquery -mutate-公式/ の

それがお役に立てば幸いです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top