¿Cómo puedo ser notificado cuando se agrega un elemento a la página?

Quiero que se ejecute una función de mi elección cuando se agrega un elemento DOM a la página. Esto está en el contexto de una extensión del navegador, por lo que la página web se ejecuta independientemente de mí y no puedo modificar su fuente. ¿Cuáles son mis opciones aquí?

Supongo que, en teoría, podría usar setInterval()para buscar continuamente la presencia del elemento y realizar mi acción si el elemento está allí, pero necesito un mejor enfoque.

¡Advertencia!

Esta respuesta ahora está desactualizada. DOM Level 4 introdujo MutationObserver , que proporciona un reemplazo efectivo para los eventos de mutación en desuso. Vea esta respuesta para una mejor solución que la presentada aquí. Seriamente. No sondee el DOM cada 100 milisegundos; desperdiciará energía de la CPU y tus usuarios te odiarán.

Dado que los eventos de mutación quedaron en desuso en 2012 y no tiene control sobre los elementos insertados porque los agrega el código de otra persona, su única opción es verificarlos continuamente.

function checkDOMChange()
{
    // check for any new element being inserted here,
    // or a particular node being modified

    // call the function again after 100 milliseconds
    setTimeout( checkDOMChange, 100 );
}

Una vez que se llama a esta función, se ejecutará cada 100 milisegundos, que es 1/10 (una décima) de segundo. A menos que necesite observación de elementos en tiempo real, debería ser suficiente.

La respuesta real es "usar observadores de mutación" (como se describe en esta pregunta: Determinar si un elemento HTML se ha agregado al DOM dinámicamente ), sin embargo, el soporte (específicamente en IE) es limitado ( http://caniuse.com/mutationobserver ) .

Entonces, la respuesta ACTUAL real es "Usar observadores de mutación ... eventualmente. Pero ve con la respuesta de Jose Faeti por ahora" :)

Entre la degradación de los eventos de mutación. y la aparición de MutationObserver, una manera eficiente de ser notificado cuando se agrega un elemento específico al DOM es explotar los eventos de animación CSS3 .

Para citar la publicación del blog:

Configure una secuencia de fotogramas clave CSS que apunte (mediante su elección de selector CSS) a cualquier elemento DOM para el que desee recibir un evento de inserción de nodo DOM. Utilicé una propiedad css relativamente benigna y poco utilizada, clip , utilicé el color del contorno en un intento de evitar jugar con los estilos de página deseados: el código una vez apuntó a la propiedad clip, pero ya no es animable en IE a partir de la versión 11. Eso Dicho esto, cualquier propiedad que pueda ser animada funcionará, elija la que más le guste.

A continuación, agregué un oyente de animación de inicio de todo el documento que uso como delegado para procesar las inserciones de nodos. El evento de animación tiene una propiedad llamada animationName que le indica qué secuencia de fotogramas clave inició la animación. Solo asegúrese de que la propiedad animationName sea la misma que el nombre de la secuencia de fotogramas clave que agregó para las inserciones de nodos y listo.

Puede usar el livequerycomplemento para jQuery. Puede proporcionar una expresión de selector como:

$("input[type=button].removeItemButton").livequery(function () {
    $("#statusBar").text('You may now remove items.');
});

Cada vez que removeItemButtonse agrega un botón de una clase, aparece un mensaje en una barra de estado.

En términos de eficiencia, es posible que desee evitar esto, pero en cualquier caso, puede aprovechar el complemento en lugar de crear sus propios controladores de eventos.

Respuesta revisada

La respuesta anterior solo pretendía detectar que un elemento se ha agregado al DOM a través del complemento.

Sin embargo, lo más probable es que un jQuery.on()enfoque sea más apropiado, por ejemplo:

$("#myParentContainer").on('click', '.removeItemButton', function(){
          alert($(this).text() + ' has been removed');
});

Si tiene contenido dinámico que debería responder a los clics, por ejemplo, es mejor vincular eventos a un contenedor principal mediante jQuery.on.

ETA 24 abr 17 Quería simplificar esto un poco con algunos async/await magia, ya que lo hace mucho más sucinto:

Usando el mismo prometido-observable:

const startObservable = (domNode) => {
  var targetNode = domNode;

  var observerConfig = {
    attributes: true,
    childList: true,
    characterData: true
  };

  return new Promise((resolve) => {
      var observer = new MutationObserver(function (mutations) {
         // For the sake of...observation...let's output the mutation to console to see how this all works
         mutations.forEach(function (mutation) {
             console.log(mutation.type);
         });
         resolve(mutations)
     });
     observer.observe(targetNode, observerConfig);
   })
} 

Su función de llamada puede ser tan simple como:

const waitForMutation = async () => {
    const button = document.querySelector('.some-button')
    if (button !== null) button.click()
    try {
      const results = await startObservable(someDomNode)
      return results
    } catch (err) { 
      console.error(err)
    }
}

Si desea agregar un tiempo de espera, puede usar un Promise.racepatrón simple como se muestra aquí :

const waitForMutation = async (timeout = 5000 /*in ms*/) => {
    const button = document.querySelector('.some-button')
    if (button !== null) button.click()
    try {

      const results = await Promise.race([
          startObservable(someDomNode),
          // this will throw after the timeout, skipping 
          // the return & going to the catch block
          new Promise((resolve, reject) => setTimeout(
             reject, 
             timeout, 
             new Error('timed out waiting for mutation')
          )
       ])
      return results
    } catch (err) { 
      console.error(err)
    }
}

Original

Puede hacer esto sin bibliotecas, pero tendría que usar algunas cosas de ES6, así que tenga en cuenta los problemas de compatibilidad (es decir, si su audiencia es principalmente amish, ludita o, peor aún, usuarios de IE8)

Primero, usaremos la API MutationObserver para construir un objeto observador. Envolveremos este objeto en una promesa, yresolve() cuando se active la devolución de llamada (h / t davidwalshblog) artículo del blog de david walsh sobre mutaciones :

const startObservable = (domNode) => {
    var targetNode = domNode;

    var observerConfig = {
        attributes: true,
        childList: true,
        characterData: true
    };

    return new Promise((resolve) => {
        var observer = new MutationObserver(function (mutations) {
            // For the sake of...observation...let's output the mutation to console to see how this all works
            mutations.forEach(function (mutation) {
                console.log(mutation.type);
            });
            resolve(mutations)
        });
        observer.observe(targetNode, observerConfig);
    })
} 

Entonces, crearemos un generator function. Si aún no los ha usado, se está perdiendo, pero una breve sinopsis es: se ejecuta como una función de sincronización, y cuando encuentra unyield <Promise> expresión, espera sin bloqueos la promesa de ser cumplido (los generadores hacen más que esto, pero esto es lo que nos interesa aquí ).

// we'll declare our DOM node here, too
let targ = document.querySelector('#domNodeToWatch')

function* getMutation() {
    console.log("Starting")
    var mutations = yield startObservable(targ)
    console.log("done")
}

Una parte difícil de los generadores es que no "regresan" como una función normal. Entonces, usaremos una función auxiliar para poder usar el generador como una función regular. (de nuevo, h / t a dwb )

function runGenerator(g) {
    var it = g(), ret;

    // asynchronously iterate over generator
    (function iterate(val){
        ret = it.next( val );

        if (!ret.done) {
            // poor man's "is it a promise?" test
            if ("then" in ret.value) {
                // wait on the promise
                ret.value.then( iterate );
            }
            // immediate value: just send right back in
            else {
                // avoid synchronous recursion
                setTimeout( function(){
                    iterate( ret.value );
                }, 0 );
            }
        }
    })();
}

Luego, en cualquier momento antes de que ocurra la mutación DOM esperada, simplemente ejecute runGenerator(getMutation).

Ahora puede integrar mutaciones DOM en un flujo de control de estilo síncrono. ¿Qué tal eso?

Hay una prometedora biblioteca de JavaScript llamada Arrive que parece una excelente manera de comenzar a aprovechar los observadores de mutaciones una vez que el soporte del navegador se vuelve común.

https://github.com/uzairfarooq/arrive/

Echa un vistazo a este complemento que hace exactamente eso - jquery.initialize

Funciona exactamente como cada función, la diferencia es que toma el selector que ha ingresado y busca nuevos elementos agregados en el futuro que coincidan con este selector y los inicialice

Inicializar se ve así

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

Pero ahora si el nuevo elemento coincide .some-element aparece un selector de en la página, se inicializará instantáneamente.

La forma en que se agrega un nuevo elemento no es importante, no necesita preocuparse por ninguna devolución de llamada, etc.

Entonces, si agrega un nuevo elemento como:

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

Se inicializará instantáneamente.

El complemento se basa en MutationObserver

Una solución javascript pura (sin jQuery):

const SEARCH_DELAY = 100; // in ms

// it may run indefinitely. TODO: make it cancellable, using Promise's `reject`
function waitForElementToBeAdded(cssSelector) {
  return new Promise((resolve) => {
    const interval = setInterval(() => {
      if (element = document.querySelector(cssSelector)) {
        clearInterval(interval);
        resolve(element);
      }
    }, SEARCH_DELAY);
  });
}

console.log(await waitForElementToBeAdded('#main'));