← Tous les articles

API et helpers

MutationObserver dans les règles — une règle qui suit le rythme de la page

15 mai 2026 · par JustZix Team

Votre règle s'exécute après le chargement de la page — mais les pages modernes ne s'arrêtent pas au chargement. Une liste tire d'autres entrées, une SPA échange des vues entières, du contenu apparaît des secondes plus tard. Un MutationObserver fait réagir la règle à ce qui se passe après le démarrage.

Le problème : le code s'exécute une fois

Le JavaScript d'une règle JustZix s'exécute une fois, au chargement de la page. Si vous masquez .promo et que la page ajoute d'autres .promo au défilement, votre code ne les a jamais vus — ils n'existaient pas encore. Vous avez besoin de quelque chose qui réagit à un changement du DOM.

MutationObserver en trois lignes

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

Le pattern est toujours le même : une fonction apply fait le travail, vous l'appelez une fois tout de suite, puis vous la confiez au MutationObserver pour qu'il l'appelle à chaque changement.

Ce que signifient les options observe

• childList: true — réagir quand des éléments enfants sont ajoutés ou supprimés.
• subtree: true — observer non seulement les enfants directs mais tout le sous-arbre. Sans ça, les changements profonds dans le DOM sont manqués.
• attributes: true — optionnel : réagir aussi aux changements d'attributs (classes, style).

Piège un — la boucle de rétroaction

Si apply change le DOM elle-même (et c'est généralement le cas), ce changement déclenche l'observer, qui rappelle apply. Pour du masquage, c'est généralement sans danger — le second passage n'a plus rien à faire. Mais si apply ajoute quelque chose, marquez les éléments traités :

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

Le sélecteur :not([data-jz]) fait que vous traitez chaque élément exactement une fois — la boucle ne s'emballe pas.

Piège deux — le coût

Sur les pages très dynamiques, l'observer se déclenche des centaines de fois. Gardez apply peu coûteuse : un querySelector rapide, un marqueur « fait », aucun calcul lourd. Si elle doit être lourde — enveloppez-la dans un debounce (différez l'exécution de 100 ms et réinitialisez le minuteur à chaque nouveau changement).

À voir aussi

• Des règles résistantes aux changements du DOM — un ensemble plus large de techniques
• Auto-expand — MutationObserver en pratique
• Exemples — des règles prêtes à étudier

Installez JustZix — et écrivez des règles qui suivent le rythme de la page.