← Alle Beiträge

API & Helfer

MutationObserver in Regeln — eine Regel, die mit der Seite Schritt hält

15 Mai 2026 · von JustZix Team

Deine Regel läuft nach dem Laden der Seite — aber moderne Seiten enden nicht beim Laden. Eine Liste zieht weitere Einträge nach, eine SPA tauscht ganze Ansichten, Inhalt taucht Sekunden später auf. Ein MutationObserver lässt die Regel auf das reagieren, was nach dem Start passiert.

Das Problem: Code läuft einmal

Das JavaScript einer JustZix-Regel läuft einmal, wenn die Seite lädt. Wenn du .promo versteckst und die Seite beim Scrollen weitere .promo hinzufügt, hat dein Code sie nie gesehen — sie existierten noch nicht. Du brauchst etwas, das auf eine Änderung im DOM reagiert.

MutationObserver in drei Zeilen

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

Das Muster ist immer dasselbe: Eine apply-Funktion macht die Arbeit, du rufst sie einmal sofort auf, dann übergibst du sie dem MutationObserver, damit er sie bei jeder Änderung aufruft.

Was die observe-Optionen bedeuten

• childList: true — reagiere, wenn Kindelemente hinzugefügt oder entfernt werden.
• subtree: true — beobachte nicht nur direkte Kinder, sondern den ganzen Teilbaum. Ohne das werden Änderungen tief im DOM verpasst.
• attributes: true — optional: reagiere auch auf Attributänderungen (Klassen, style).

Fallstrick eins — die Rückkopplungsschleife

Wenn apply das DOM selbst ändert (und das tut es meist), feuert diese Änderung den Observer, der apply erneut aufruft. Beim Verstecken ist das meist harmlos — der zweite Durchlauf hat nichts mehr zu tun. Aber wenn apply etwas hinzufügt, markiere die erledigten Elemente:

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

Der :not([data-jz])-Selektor sorgt dafür, dass du jedes Element genau einmal behandelst — die Schleife dreht nicht auf.

Fallstrick zwei — die Kosten

Auf sehr dynamischen Seiten feuert der Observer Hunderte Male. Halte apply billig: ein schneller querySelector, ein „erledigt"-Marker, keine schwere Berechnung. Muss sie schwer sein — wickle sie in ein Debounce (verzögere die Ausführung um 100 ms und setze den Timer bei jeder neuen Änderung zurück).

Siehe auch

• Regeln, die DOM-Änderungen überstehen — ein breiteres Set an Techniken
• Auto-expand — MutationObserver in der Praxis
• Beispiele — fertige Regeln zum Studieren

Installiere JustZix — und schreibe Regeln, die mit der Seite Schritt halten.