В библиотеке ядра Bitrix Framework часто приходится динамически показывать и скрывать элементы: от валидации форм до реактивных SPA-разметок.
Метод BX.isNodeHidden(node) возвращает true, если переданный DOM-узел скрыт, и false, если отображается. Под «скрыт» понимается любой из вариантов:
style="display:none"или унаследованныйdisplay:nonetype="hidden"у<input>- элемент находится внутри скрытого родителя
- элементу назначен CSS-класс c
visibility:hiddenилиopacity:0и одновременнымpointer-events:none(двойная проверка ядра)
Сигнатура и параметры
BX.isNodeHidden(
DOMNode node // любой DOM-узел (Element, HTMLElement, Text и т.д.)
) : BooleanВозвращает: логическое значение (true|false).
Быстрый старт: минимальный пример
Вставьте код полностью в любой шаблон компонента, чтобы моментально проверить работу метода.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Демо BX.isNodeHidden</title>
<!-- Подключаем ядро Битрикс -->
<script src="/bitrix/js/main/core/core.js"></script>
<style>
#panel, #result {
cursor:pointer;
width:280px; margin:12px auto; padding:8px;
text-align:center; border-radius:6px;
background:#c5c5c5; color:#fff; box-shadow:0 0 10px #333;
user-select:none;
}
</style>
</head>
<body>
<div id="panel">Проверить скрытость элементов</div>
<input id="t1" type="text" maxlength="20" value="t1">
<input id="t2" type="hidden" maxlength="20" value="t2">
<div id="result" style="display:none"></div>
<script>
BX.ready(function () {
// Клик по панели запускает проверку
BX.bind(BX('panel'), 'click', function () {
const resText = [
't1 скрыт: ' + BX.isNodeHidden(BX('t1')),
't2 скрыт: ' + BX.isNodeHidden(BX('t2'))
].join(' | ');
BX.adjust(BX('result'), {
style : {display: 'block'},
text : resText
});
});
});
</script>
</body>
</html>Распространённые сценарии использования
1. Валидация формы перед отправкой
BX.bind(BX('sendBtn'), 'click', () => {
if (BX.isNodeHidden(BX('errorBlock'))) {
BX.ajax.submit(BX('mainForm'));
} else {
alert('Сначала исправьте ошибки формы!');
}
});2. Ленивое подключение сторонних библиотек
function ensureChartsJsLoaded(cb) {
if (window.Chart) { cb(); return; }
// Загружаем один раз и рисуем только если canvas сейчас видим
if (!BX.isNodeHidden(BX('chartCanvas'))) {
BX.loadScript('/local/assets/chart.min.js', cb);
}
}3. Компонентная верстка (шаблон catalog.section)
<?php foreach ($arResult['ITEMS'] as $item): ?>
<div id="card-<?= $item['ID'] ?>" class="product-card<?= $item['OFFERS'] ? '' : ' no-offers' ?>">
<!-- … -->
</div>
<?php endforeach; ?>
<script>
BX.ready(() => {
document.querySelectorAll('.product-card').forEach(card => {
if (BX.isNodeHidden(card)) return; // пропускаем скрытые по условию товары
initCardHandlers(card); // навешиваем события только на видимые
});
});
</script>4. SPA на Vue + Bitrix
mounted() {
// После рендера проверяем ref
if (!BX.isNodeHidden(this.$refs.sidebar)) {
this.$refs.sidebar.scrollIntoView({behavior:'smooth'});
}
}5. Сложные комбинированные условия
const node = BX('sidebar');
const hiddenByCss = BX.isNodeHidden(node);
const zeroSize = !node.offsetWidth && !node.offsetHeight;
if (hiddenByCss || zeroSize) {
console.log('Элемент реально не виден пользователю');
}Лучшие практики и частые ошибки
| Ошибка | Как правильно |
|---|---|
| Передача строки-ID вместо DOM-ноды | BX.isNodeHidden(BX('id')), а не BX.isNodeHidden('id') |
| Проверка «видимости» на сервере | BX-методы работают только в браузере |
Использование type="hidden" для хранения данных |
Лучше хранить в data- атрибутах или JS-переменных |
| Забыли, что родитель может быть скрыт | Метод рекурсивно анализирует цепочку родителей, учитывайте это |
Производительность
BX.isNodeHidden обращается к стилям браузера и вызывает getComputedStyle. В современных движках это быстро, но избегайте:
- многоразовых вызовов внутри анимаций — кэшируйте результат;
- проверки внутри циклов, если можно проверить один раз выше по дереву.
Когда не стоит использовать BX.isNodeHidden
- CSS-медиа-запросы. Для адаптивных решений проще управлять классами.
- Сервер-сайд рендер сайтов 2.0. На Node.JS такая проверка бессмысленна.
- Сложные a11y-скрипты. Для доступности лучше ориентироваться на атрибуты
aria-*, а не на видимость.
Заключение
Метод BX.isNodeHidden() — инструмент для контролируемого управления интерфейсом в проекте на 1С-Битрикс. Используйте его:
- для безопасного навешивания обработчиков только на видимые элементы,
- ленивой инициализации тяжёлых скриптов,
- унифицированной проверки полей форм.
Следуя примерам из этой статьи, вы минимизируете баги, ускорите рендер и повысите UX вашего сайта.