Controlador para nodos DOM creados dinámicamente a medida que se insertan

Question

Me gusta ejecutar scripts personalizados en páginas que no son de mi propiedad o control. Muchas veces estas páginas tienen contenido creado dinámicamente al cual me gustaría aplicarle una función.

¿Esto es posible? Si es así, ¿cómo puedo hacer esto? Idealmente, estoy buscando algo en vivo en el método live de jQuery, excepto que en lugar de vincular un evento como click sería más como un evento que ocurre cuando el elemento se carga en el DOM. load evento funcionaría para algunos elementos pero no creo para nada ...

Para esta pregunta, suponga que no puede ver o cambiar el código que está insertando los nodos DOM. Me gustaría una técnica que podría usar en un UserScript o bookmarklet que podría usarse en múltiples sitios no relacionados.

Editar: Estoy buscando algo para usar en mi invertir colores bookmarklet: JavaScript: Invert color on all elements of a page

Answer 1

Suponiendo que se está ejecutando un navegador como Firefox o Chrome, se puede detectar el evento DOMNodeInserted:

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

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

violín: http://jsfiddle.net/VeF6g/ (probablemente falla en IE)

Answer 2

Esto es bastante difícil de lograr, porque no hay ningún caso viable para reaccionar a DOM cambios. Preferiría adherirme a la delegación de eventos en su lugar.

Pero hay algunos eventos que pueden serle útiles o interesantes. En Mozilla Developer Network's list of DOM events se puede ver por ejemplo .:

• DOMNodeInserted,
• DOMNodeInsertedIntoDocument,
• DOMNodeRemoved,
• DOMElementNameChanged,

Todos ellos, sin embargo están marcados como borradores del W3C.

Answer 3

Una forma genérica de detectar la inserción de nodos es utilizar el evento de mutación DOMNodeInserted.

Estoy interesado en cada nodo en realidad. Estoy cambiando los colores de todo en la página.

Para este propósito, una mejor solución es inyectar una hoja de estilos dinámica, suficiente con la bandera !important. Si solo desea cambiar los colores, le recomiendo la extensión Stylish (Stylish for Chrome) en lugar de GreaseMonkey.

Answer 4

Si no tienen el acceso a una biblioteca como jQuery , aquí es la sintaxis de JavaScript solamente- :

document.addEventListener('DOMNodeInserted', nodeInsert) 

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

Creo que debería funcionar en la mayoría de los navegadores.

Answer 5

Aquí hay una buena forma de manejar el evento de inserción de nodos. establece animaciones para el elemento que vas a agregar usando 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 es el id de la div, en el que voy a añadir dinámicamente botón de .

<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>