2

Hola quisiera saber la forma de detectar cambios en una estructura html. Por ejemplo

<html>
 <div><div>
<html>

A lo largo del tiempo esa estructura se ira cambiando.quisiera saber si hay alguna forma detectar los cambios..sin tener que usar timeOut en javascript,ya que se hacen peticiones que a apis en un momento puede durar 1000 y en otra 2000. Muchas gracias!

2
  • Quieres detectar si hay mas divs a los largo del tiempo? es decir si inicialmente tienes 2 y luego se crea otro detectar ese nuevo? Commented el 12 sept. 2018 a las 20:20
  • Hice una pregunta parecida hace algún tiempo. Las respuestas de allí te pueden ayudar.
    – Alvaro Montoro
    Commented el 20 oct. 2018 a las 18:33

1 respuesta 1

3

Podes usar el API MutationObserver, se define un callback que procesa los cambios y luego se le dice que elemento observar junto a la lista de cosas para observar.

En este ejemplo le pongo a observar la lista de nodes hijos, sus atributos y cambios en el árbol de los hijos.

La mayor parte del código mostrado es para simular un ajax con promesas y tiempos variables, además de implementar un console log que no tape el resultado.

Además del agregar items y borrar items, hay 2 botones extra que controlan el observador para empezar a observar y dejar de observar.

En cada item hay 2 botones mas que cambian un atributo o borran el item.

El observer le pasa al callback (cada vez que detecta un cambio) una lista de "mutaciones", en esta lista cada mutación tiene un tipo, y un target o una lista de nodos target, la onda es recorrer las mutaciones y verificar el tipo.

// creamos el observador

const panoptico = new MutationObserver(
  (mutaciones, observer) => {
    for (var m of mutaciones) {
      if (m.type == 'childList') {
        consolog('[espia] Cambió el número de items');
      } else if (m.type == 'attributes') {
        consolog(
          '[espia] El atributo ',
          m.attributeName,
          ' de ',
          m.target.querySelector('h2').innerHTML,
          'fue modificado.');
      }
    }
  }
);

var $dinamico = document.getElementById("dinamico");

// comenzar a observar
document.getElementById("espia").onclick = function() {
  consolog('te estoy viendo');
  panoptico.observe(
    $dinamico, {
      attributes: true,
      childList: true,
      subtree: true
    },
  );
}

// dejar de observar
document.getElementById("desespia").onclick = function() {
  consolog('ya no se que haces');
  panoptico.disconnect();
}

// resto del code ejemplo



// para que el log no tape las cosas
var consolog = function(...cosas) {
  var logs = document.getElementById('logs');
  cosas.forEach((t) => {
    logs.innerHTML += t + " ";
  });
  logs.innerHTML += "\n";
  logs.scrollTop = logs.scrollHeight;
};

let descripciones = ["arbol", "pera", "batata", "semaforo"];
var start = Date.now();

// timeout random por usar el wifi del hotel
var fetchDescripcion = function(id) {
  return new Promise((resolve, reject) => {
    consolog('fetching', id);
    window.setTimeout(() => {
      resolve({
        id: id % descripciones.length,
        descripcion: descripciones[id % descripciones.length],
      });
    }, (Math.random() * 4 + 2) * 1000);
  });
}

var setDescripcion = function(d) {
  consolog('resolve', d.id, d.descripcion);
  var info = document.createElement('div');
  info.className = "info";
  var nombre = document.createElement('h2');
  nombre.innerHTML = "(" + d.id + ") " + d.descripcion;
  var masinfo = document.createElement('p');
  masinfo.innerHTML = "Marca de tiempo: " + (Date.now() - start);

  var marcaMe = document.createElement('button');
  marcaMe.classList.add("btn", "btn-marcar");
  marcaMe.innerHTML = "&#9055;";
  marcaMe.onclick = function(ev) {
    var elem = ev.target.parentNode;
    elem.classList.toggle('marcado');
  }

  var borraMe = document.createElement('button');
  borraMe.classList.add("btn", "btn-borrar");
  borraMe.innerHTML = "&#8416;";
  borraMe.onclick = function(ev) {
    var elem = ev.target.parentNode;
    elem.parentNode.removeChild(elem);
  }
  info.appendChild(nombre);
  info.appendChild(marcaMe);
  info.appendChild(borraMe);
  info.appendChild(masinfo);

  $dinamico.appendChild(info);
}

var getDescripcion = function(id) {
  fetchDescripcion(id).then(x => setDescripcion(x));
}


document.getElementById("pone").onclick = function() {
  for (var i = 0; i < 5; i++) {
    var dId = Math.floor(Math.random() * 20);
    getDescripcion(dId);
  }
}

document.getElementById("saca").onclick = function() {
  while ($dinamico.lastChild) {
    $dinamico.removeChild($dinamico.lastChild);
  }
  start = Date.now();
}
#info {
  position: fixed;
  right: 0;
  top: 25px;
  bottom: 0
}

#logs {
  height: 160px;
  overflow-y: scroll;
  min-width: 50vw;
  background: #fafafa;
  border: 1px solid #ccc;
}

.btn {
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 25px;
  height: 25px;
  line-height: 20px;
  font-size: 14px;
  text-align: center;
  overflow: hidden;
  background: #fff;
  display: inline-block;
  padding: 2px;
  margin: 2px;
  cursor: pointer;
}

.btn-marcar {
  background: #fe0;
  color: #000;
}

.btn-borrar {
  background: #f00;
  color: #fff;
}

.marcado {
  background: #fed;
}

.info {
  border: 1px dashed #000;
  border-radius: 5px;
  padding: 5px;
  margin: 5px 0;
}

h2,
p {
  padding: 0;
  margin: 0 0 5px 0;
}
<html>

<body>
  <nav>
    <button id="pone">agregar 5</button>
    <button id="saca">limpiar</button>

    <button id="espia">empezar a observar</button>
    <button id="desespia">dejar de observar</button>
  </nav>
  <section id="info">
    <PRE id="logs"></PRE>
  </section>
  <section id="dinamico">
    <div>

    </div>
  </section>
</body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.