← Все статьи

API и хелперы

MutationObserver в правилах — правило, идущее в ногу со страницей

15 мая 2026 · автор JustZix Team

Твоё правило выполняется после загрузки страницы — но современные страницы не заканчиваются на загрузке. Список подтягивает новые записи, SPA меняет целые виды, контент появляется через секунды. MutationObserver заставляет правило реагировать на то, что происходит после запуска.

Проблема: код выполняется один раз

JavaScript правила JustZix выполняется один раз, когда страница загружается. Если ты скрываешь .promo, а страница добавляет новые .promo при прокрутке, твой код их никогда не видел — их ещё не существовало. Тебе нужно что-то, реагирующее на изменение в DOM.

MutationObserver в три строки

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

Паттерн всегда один и тот же: функция apply делает работу, ты вызываешь её один раз сразу, потом доверяешь её MutationObserver'у, чтобы он вызывал её при каждом изменении.

Что значат опции observe

• childList: true — реагируй, когда добавляются или удаляются дочерние элементы.
• subtree: true — наблюдай не только за прямыми детьми, но за всем поддеревом. Без этого изменения в глубине DOM ускользают.
• attributes: true — необязательно: реагируй и на изменения атрибутов (классы, style).

Ловушка один — петля обратной связи

Если apply сама меняет DOM (а обычно так и есть), это изменение запускает observer, который снова вызывает apply. Для скрытия это обычно безвредно — второй проход больше ничего не находит. Но если apply добавляет что-то, помечай готовые элементы:

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

Селектор :not([data-jz]) заставляет тебя обрабатывать каждый элемент ровно один раз — петля не закручивается.

Ловушка два — стоимость

На очень динамичных страницах observer срабатывает сотни раз. Держи apply дешёвой: быстрый querySelector, маркер «готово», никаких тяжёлых вычислений. Если она должна быть тяжёлой — оберни её в debounce (отложи выполнение на 100 мс и сбрасывай таймер при каждом новом изменении).

Смотри также

• Правила, устойчивые к изменениям DOM — более широкий набор техник
• Auto-expand — MutationObserver на практике
• Примеры — готовые правила для изучения

Установи JustZix — и пиши правила, идущие в ногу со страницей.