動的に作成されたDOMノードが挿入されたときのハンドラ

Question

自分が所有していないか制御していないページでカスタムスクリプトを実行するのが楽しいです。多くの場合、これらのページには、機能を適用したいコンテンツが動的に作成されています。

これは可能ですか？もしそうなら、どうしたらいいですか？理想的には、私は何かのライブのjQueryのliveメソッドを探していますが、clickのようなイベントをバインドする代わりに、要素がDOMにロードされたときに起こるイベントのようになります。 loadイベントは一部の要素では機能しますが、私はすべてとは思えません。

この質問では、DOMノードを挿入しているコードを見たり変更したりすることはできません。私は、関連のない複数のサイトにまたがって使用されるユーザースクリプトやブックマークレットで使用できるテクニックを望んでいます。

編集：私は私の反転色のブックマークレットで使用するために何かを探しています：DOMの変化に反応のための実行可能なイベントがありませんのでJavaScript: Invert color on all elements of a page

Answer 1

jQueryののようなライブラリへのアクセス、ここでは、オンリーはJavaScriptで構文です：

document.addEventListener('DOMNodeInserted', nodeInsert) 

function nodeInsert() { 
    event.srcElement.style.color = '#ffffff' 
} 

私はそれがほとんどのブラウザで動作するはずだと思います。

Answer 2

これは、達成することはかなり困難です。むしろ、代わりにイベント委任に固執したいと思います。

しかし、あなたが役に立つか面白いかもしれないいくつかの出来事があります。 Mozilla Developer Network's list of DOM eventsにあなたが例えば見ることができます。：

• DOMNodeInserted、
• DOMNodeInsertedIntoDocument、
• DOMNodeRemoved、
• DOMElementNameChanged、

それらのすべては、しかし、W3Cドラフトとしてマークされています。

Answer 3

ノードの挿入を検出する一般的な方法は、DOMNodeInserted突然変異イベントを使用することです。

私はすべてのノードに実際に興味があります。私はページ上のすべての色を変更しています。

この目的のために、より良い解決策は、!importantフラグで十分である動的スタイルシートを挿入することです。色のみを変更したい場合は、GreaseMonkeyの代わりにStylish拡張子（Stylish for Chrome）をお勧めします。

$(document).on('DOMNodeInserted', function(e) { 
    $(e.target).css({ color : '#c00' }); 
}); 

$('body').append('<div>test</div>');​ 

フィドル：http://jsfiddle.net/VeF6g/（おそらくIEで失敗した）

Answer 4

をあなたは持っていない場合は、FirefoxやChromeなどのブラウザを実行している、あなたはDOMNodeInsertedイベントをリッスンしたと仮定すると

Answer 5

ここでは、ノード挿入イベントを処理する優れた方法の1つです。 cssを使用して追加する要素のアニメーションを設定します。

<style type="text/css"> 

/* set up the keyframes; remember to create prefixed keyframes too! */ 

@keyframes nodeInserted { 
from { opacity: 0.99; } 
to { opacity: 1; } 
} 

#parent > button { 
animation-duration: 0.001s; 
animation-name: nodeInserted; 
} 

</style> 

#parentは私が動的にボタンの を追加しようと思っているのdivのためのIDです。

<script type="text/javascript"> 

    var insertListener = function(event){ 
     if (event.animationName == "nodeInserted") { 
      // This is the debug for knowing our listener worked! 
      // event.target is the new node! 
      console.warn("Another node has been inserted! ", event, event.target); 
     } 
    } 

    document.addEventListener("animationstart", insertListener, false); // standard + firefox 
    document.addEventListener("MSAnimationStart", insertListener, false); // IE 
    document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari 

    setInterval(function(){ 

     var btn = document.createElement("BUTTON"); 

     var t = document.createTextNode("CLICK ME");  // Create a text node 

     btn.appendChild(t);   

     document.getElementById("parent").appendChild(btn); 

    }, 2000); 

</script>