← Todos los artículos

API y helpers

MutationObserver en las reglas — una regla que sigue el ritmo de la página

15 mayo 2026 · por JustZix Team

Tu regla se ejecuta tras la carga de la página — pero las páginas modernas no terminan en la carga. Una lista tira de más entradas, una SPA intercambia vistas enteras, el contenido aparece segundos después. Un MutationObserver hace que la regla reaccione a lo que ocurre tras el arranque.

El problema: el código se ejecuta una vez

El JavaScript de una regla JustZix se ejecuta una vez, cuando la página carga. Si ocultas .promo y la página añade más .promo al hacer scroll, tu código nunca los ha visto — todavía no existían. Te hace falta algo que reaccione a un cambio en el DOM.

MutationObserver en tres líneas

function apply() {
  document.querySelectorAll('.promo').forEach(el => el.remove());
}
apply();
new MutationObserver(apply)
  .observe(document.body, { childList: true, subtree: true });

El patrón es siempre el mismo: una función apply hace el trabajo, la llamas una vez enseguida, luego se la confías al MutationObserver para que la llame en cada cambio.

Qué significan las opciones observe

• childList: true — reacciona cuando se añaden o eliminan elementos hijos.
• subtree: true — observa no solo los hijos directos sino todo el subárbol. Sin él, los cambios en profundidad en el DOM se escapan.
• attributes: true — opcional: reacciona también a los cambios de atributos (clases, style).

Trampa uno — el bucle de retroalimentación

Si apply cambia el DOM ella misma (y normalmente lo hace), ese cambio activa el observer, que vuelve a llamar a apply. Para ocultar es normalmente inofensivo — la segunda pasada ya no tiene nada que hacer. Pero si apply añade algo, marca los elementos hechos:

function apply() {
  document.querySelectorAll('.card:not([data-jz])').forEach(el => {
    el.dataset.jz = '1';
    el.prepend(makeBadge());
  });
}

El selector :not([data-jz]) hace que gestiones cada elemento exactamente una vez — el bucle no se enrosca.

Trampa dos — el coste

En páginas muy dinámicas el observer se dispara cientos de veces. Mantén apply poco costosa: un querySelector rápido, un marcador «hecho», ningún cálculo pesado. Si debe ser pesada — envuélvela en un debounce (aplaza la ejecución 100 ms y resetea el timer en cada nuevo cambio).

Mira también

• Reglas resistentes a los cambios del DOM — un conjunto más amplio de técnicas
• Auto-expand — MutationObserver en la práctica
• Ejemplos — reglas listas para estudiar

Instala JustZix — y escribe reglas que sigan el ritmo de la página.