← Все статьи

API и хелперы

Пиши JS-правила, переживающие изменения DOM

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

Ты написал правило, оно работало неделю, сегодня остановилось. Страница не сломалась — она просто переименовала класс с .btn-primary на .Button_primary_x7f3. Вот как писать правила, переживающие такие изменения.

Почему правила ломаются

Правило цепляется за DOM страницы, которую ты не контролируешь. Каждый рестайлинг, каждая сборка с новым хешем класса, каждый A/B-тест может сдвинуть почву у тебя под ногами. Ты не можешь это устранить — можешь это ограничить.

Правило 1 — целься в то, что стабильно

Селекторы от самого к наименее долговечному:

• Лучшее: семантические атрибуты — [aria-label], [role], [name], [type], [data-testid]. Меняются редко, потому что несут смысл.
• Хорошее: теги и их структура — nav a, main > article.
• Рискованное: читаемые человеком классы — .sidebar, .cookie-banner.
• Худшее: классы с хешем — .css-1a2b3c, .jsx-987. Генерируются при сборке, меняются при каждом деплое.

Правило 2 — целься текстом, когда классы подводят

Текст, видимый пользователю, меняется реже CSS-классов. Вместо того чтобы ловить кнопку по классу, найди её по содержимому:

const btn = [...document.querySelectorAll('button')]
  .find(b => /сохранить|отправить|save|submit/i.test(b.textContent || ''));

Правило 3 — всегда проверяй, что элемент существует

Правило, предполагающее, что элемент есть, взорвётся в день, когда его нет — и часто убьёт остальной собственный код. Пиши защитно:

const el = document.querySelector('.target');
if (el) {
  // работа здесь
}

Оператор ?. делает это лаконично: document.querySelector('.target')?.remove() ничего не делает, когда элемент отсутствует — вместо того, чтобы бросить ошибку.

Правило 4 — пусть правило кричит, когда теряется

Худший сбой — тихий — правило не работает, и ты не знаешь почему. Добавь сигнал:

const el = document.querySelector('.target');
if (!el) JUSTZIX.warn('Правило X: .target не найден — страница изменилась?');

Запись в Output Console сразу говорит тебе, что пора исправить селектор — вместо угадывания.

Смотри также

• MutationObserver в правилах — устойчивость к изменениям во времени
• Output Console как логгер — куда попадают сигналы правил
• URL-паттерны — устойчивость начинается с совпадения

Установи JustZix — и пиши правила, не ломающиеся при следующем деплое страницы.