Управление DOM-структурой в 1С-Битрикс: разбор BX.hasClass с примерами использования

Работа с классами HTML-элементов — одна из повседневных задач фронтенд-разработчика, и платформа 1С-Битрикс предоставляет для этого удобный набор методов пространства имён BX. В этой статье мы разберём «под микроскопом» функцию BX.hasClass, узнаем, как она работает изнутри, рассмотрим частые и нетривиальные сценарии её применения, а также покажем, как комбинировать её с другими методами для построения интерактивного интерфейса без сторонних библиотек.

1. Сигнатура и назначение

/**
 * Проверяет наличие CSS-класса на DOM-узле.
 * @param {HTMLElement} node – узел, который проверяем
 * @param {string} className – имя класса без точки
 * @returns {boolean} – true, если класс есть
 */
BX.hasClass(node, className);

Под капотом метод сначала пытается использовать node.classList.contains, а при отсутствии classList (крайне старые браузеры) проводит проверку через регулярное выражение по node.className.

2. Минимальный пример

Сделаем смену текста и цвета кнопки, чтобы сразу увидеть результат.

<div id="jsToggleBtn" class="btn-gray">Проверить класс</div>
<script>
BX.ready(() => {
    const btn = BX('jsToggleBtn');

    // Навешиваем единый обработчик
    BX.bind(btn, 'click', function () {
        // Если класс уже есть – убираем и показываем одно сообщение,
        // иначе – добавляем и показываем другое
        if (BX.hasClass(this, 'btn-active')) {
            BX.removeClass(this, 'btn-active');
            this.textContent = 'Класса нет';
        } else {
            BX.addClass(this, 'btn-active');
            this.textContent = 'Класс найден';
        }
    });
});
</script>
<style>
.btn-gray { padding:12px 24px; background:#c9d1d9; cursor:pointer; border-radius:6px; text-align:center; }
.btn-active { background:#4caf50; color:#fff; /* добавляется/убирается скриптом */ }
</style>

3. Распространённые паттерны применения

3.1 Ленивая активация вкладок

<ul id="jsTabs" class="tabs">
    <li data-target="tab1" class="tabs__item tabs__item_active">Вкладка 1</li>
    <li data-target="tab2" class="tabs__item">Вкладка 2</li>
    <li data-target="tab3" class="tabs__item">Вкладка 3</li>
</ul>
<div id="tab1" class="tabs__pane">Контент 1</div>
<div id="tab2" class="tabs__pane tabs__pane_hidden">Контент 2</div>
<div id="tab3" class="tabs__pane tabs__pane_hidden">Контент 3</div>
<script>
BX.ready(() => {
    const container = BX('jsTabs');
    // Делегируем клики
    BX.bind(container, 'click', (e) => {
        const item = e.target.closest('.tabs__item');
        if (!item) return;
        // Прерываем обработку, если кликнули уже по активной вкладке
        if (BX.hasClass(item, 'tabs__item_active')) return;
        // Снимаем активность со всех
        [].forEach.call(container.children, el => BX.removeClass(el, 'tabs__item_active'));
        // Добавляем новой
        BX.addClass(item, 'tabs__item_active');
        // Показываем соответствующую панель
        const paneId = item.dataset.target;
        document.querySelectorAll('.tabs__pane').forEach(pane => {
            BX[pane.id === paneId ? 'removeClass' : 'addClass'](pane, 'tabs__pane_hidden');
        });
    });
});
</script>
<style>
.tabs { display:flex; gap:8px; list-style:none; padding:0; }
.tabs__item { padding:8px 16px; background:#e0e0e0; cursor:pointer; border-radius:4px; }
.tabs__item_active { background:#0288d1; color:#fff; }
.tabs__pane_hidden { display:none; }
</style>

3.2 Подсветка строк таблицы при выборе

<table id="jsTable" class="orders">
  <tr data-id="101"><td>№101</td><td>Товар A</td></tr>
  <tr data-id="102"><td>№102</td><td>Товар B</td></tr>
  <tr data-id="103"><td>№103</td><td>Товар C</td></tr>
</table>
<script>
BX.ready(() => {
    const table = BX('jsTable');
    BX.bind(table, 'click', (e) => {
        const row = e.target.closest('tr');
        if (!row) return;
        BX.toggleClass(row, 'orders__row_selected');
        console.log(
            BX.hasClass(row, 'orders__row_selected')
                ? `Строка ${row.dataset.id} выбрана`
                : `Строка ${row.dataset.id} снята`
        );
    });
});
</script>
<style>
.orders tr { cursor:pointer; transition:background .2s; }
.orders__row_selected { background:#ffe082; }
</style>

4. Ускоряем работу: массовая проверка классов

Иногда нужно узнать, есть ли класс хотя бы на одном элементе коллекции (например, при бесконечном скролле). Следующая вспомогательная функция демонстрирует, как повторно использовать BX.hasClass:

/**
 * Проверяет, содержит ли хотя бы один элемент коллекции указанный класс.
 * @param {NodeList|HTMLElement[]} nodes
 * @param {string} cls
 * @returns {boolean}
 */
function someHasClass(nodes, cls) {
    for (let i = 0; i < nodes.length; i++) {
        if (BX.hasClass(nodes[i], cls)) return true;
    }
    return false;
}

5. Частые ошибки и способы их избежать

6. Альтернативы и совместное использование

7. Интеграция с современными фреймворками

Даже если вы используете React, Vue или Angular внутри 1С-Битрикс, BX.hasClass остаётся полезным для «старого» окружения: редакция «Управление сайтом» часто сочетает компонентный фронтенд и классические шаблоны PHP. Пример микса с Vue 3 (Composition API):

<div id="vueApp" :class="{ 'app--loaded': isLoaded }">Загрузка…</div>
<script type="module">
import { createApp, ref, onMounted } from 'vue';
createApp({
  setup() {
    const isLoaded = ref(false);
    onMounted(() => {
      // После инициализации приложения проверяем, не назначен ли класс сервером
      if (!BX.hasClass(document.getElementById('vueApp'), 'app--loaded')) {
        isLoaded.value = true; // заставим Vue дорисовать класс
      }
    });
    return { isLoaded };
  }
}).mount('#vueApp');
</script>

8. Итоги

• BX.hasClass — инструмент для проверки класса, совместимый со старыми браузерами.
• Используйте его для предотвращения лишних действий (UI-оптимизация).
• Комбинируйте с BX.addClass / BX.removeClass / BX.toggleClass для полного контроля над DOM.
• Помните об оптимизации в циклах и о корректном формате аргументов.

С этими приёмами вы сможете создавать богатый интерфейс в 1С-Битрикс без привлечения сторонних библиотек и при этом сохранить максимальную совместимость.