javascript - length - jquery remove

Evento de mutación DOM en JQuery o Javascript vainilla

Question

¿Hay algún evento de mutación DOM en JQuery o Javascript vainilla que active el navegador?

Para aclarar, digamos que tengo un script en mi página que inserta un div en el cuerpo. No tengo acceso al script y no sé cuándo se ha insertado el div. Me preguntaba si hay un evento de mutación DOM para el que puedo agregar un oyente, para saber cuándo se ha insertado un elemento. Sé que puedo usar un temporizador para verificar periódicamente la inserción pero, en realidad, no me gusta la sobrecarga que esto supondría.

Answer 1

El plugin livequery se puede usar para esto. En la versión 1.xa el temporizador se usaba para verificar periódicamente cualquier cambio. Sin embargo, la nueva versión 2.x rama parece estar funcionando sin tiempo de espera periódico (no probado).

Answer 2

Esto es ciertamente un truco, pero ¿por qué no parchear los métodos DOM subyacentes usados ​​para insertar los nodos? Hay un par de maneras de hacer esto:

A Usted sabe a qué elemento específico se agregará:

var c = document.getElementById(''#container'');
c.__appendChild = c.appendChild;
c.appendChild = function(){
     alert(''new item added'');
     c.__appendChild.apply(c, arguments); 
}

violín demo para A

B. Usted sabe a qué tipo de elemento se agregará:

HTMLDivElement.prototype.__appendChild = HTMLDivElement.prototype.appendChild;
HTMLDivElement.prototype.appendChild = function(){
    alert(''new item added'');
    HTMLDivElement.prototype.__appendChild(this,arguments); 
}

violín demo para B

(Tenga en cuenta que la solución B no es compatible con IE < 8 o cualquier otro navegador que no admita prototipos DOM).

Esta misma técnica podría utilizarse fácilmente en todas las funciones de mutación DOM subyacentes, como insertBefore , replaceChild o removeChild .

Esa es la idea general, estas demostraciones podrían adaptarse para casi cualquier otro caso de uso, digamos que deseas lanzar una red amplia y capturar todas las adiciones sin importar el tipo. Y asegúrate de que funcione en todos los navegadores pero con IE < 8 ? (ver el ejemplo C a continuación)

ACTUALIZAR

C. Camine recursivamente por el DOM, cambie la función en cada elemento para activar una devolución de llamada, y luego aplique el mismo parche a los elementos secundarios que se anexen.

var DOMwatcher = function(root, callback){
  var __appendChild = document.body.appendChild;

  var patch = function(node){
    if(typeof node.appendChild !== ''undefined'' && node.nodeName !== ''#text''){
      node.appendChild = function(incomingNode){
        callback(node, incomingNode);
        patch(incomingNode);
        walk(incomingNode);
        __appendChild.call(node, incomingNode);
      };
    }
    walk(node);  
  };

  var walk = function(node){
    var i = node.childNodes.length;
    while(i--){
      patch(node.childNodes[i]);
    }
  };

  patch(root);

};

DOMwatcher(document.body, function(targetElement, newElement){ 
   alert(''append detected'');    
});

$(''#container ul li'').first().append(''<div><p>hi</p></div>'');
$(''#container ul li div p'').append(''<a href="#foo">bar</a>'');

violín demo para C

ACTUALIZACIÓN 2

Como comentó Tim Down , la solución anterior tampoco funcionará en IE < 8 porque appendChild no es una Function y no admite call ni apply . Supongo que siempre puedes setInterval método setInterval torpe pero confiable, si typeof document.body.appendChild !== ''function'' .

Answer 3

Hay algunos eventos de mutación DOM desaprobados , como DOMNodeInserted y DOMNodeInsertedIntoDocument que aún funcionan para mí en Chrome 14 e IE9.

Vea un ejemplo en http://jsfiddle.net/Kai/WTJq6/

Véalos todos en el borrador del W3C en http://www.w3.org/TR/DOM-Level-3-Events/

Answer 4

JCADE (JQuery Create and Destroy Events) hará esto. Utiliza comportamientos para eventos de mutación de IE y DOM para otros navegadores. No utiliza eventos de tiempo y no ajusta los métodos de JQuery como livequery.

https://github.com/snesin/jcade

$( document ).create( "a", function( event ) { alert( event.target ); });

Answer 5

No sin un plugin, creo, pero no me sorprendería si estoy equivocado.

Mi investigación ha encontrado algunos para elegir.

Aquí hay uno: http://plugins.jquery.com/project/mutation-events

Aquí hay otro: https://www.adaptavist.com/display/jQuery/Mutation+Events

Answer 6

Si está buscando una alternativa a este método, aquí está jqui.net/jquery-projects/jquery-mutate-official que también le permite agregar eventos usted mismo y vigilar casi cualquier cambio , cambio de nombre de clase, cambio de altura, cambio de ancho.