Добавление элементов в DOM

Динамическое изменение структуры документа — обычная практика современных веб-приложений. Элементы интерфейса могут появляться, удаляться или изменяться в результате пользовательских действий, сетевых запросов или логики компонентов. В таких условиях особое значение приобретает корректная обработка фокусируемых и tabbable-элементов, поскольку навигация с клавиатуры должна оставаться последовательной и предсказуемой.

Библиотека Tabbable предназначена для определения элементов, которые могут получать фокус при навигации клавишей Tab. При добавлении новых узлов в DOM необходимо учитывать, как библиотека определяет такие элементы и каким образом повторно анализирует структуру документа.

Динамический DOM и фокусируемые элементы

Tabbable не хранит постоянное состояние элементов. Она выполняет анализ текущего DOM-дерева в момент вызова функций. Это означает, что при появлении новых элементов в документе библиотека начинает учитывать их автоматически — при следующем обращении к API.

Основные функции библиотеки:

  • tabbable(container)
  • focusable(container)
  • isTabbable(element)
  • isFocusable(element)

Каждая из них работает на основе текущего состояния DOM. Если в контейнер были добавлены новые элементы, они будут обнаружены при следующем вызове.

Пример:

import { tabbable } from 'tabbable';

const container = document.querySelector('#dialog');

let elements = tabbable(container);
console.log(elements.length);

После добавления новых элементов список изменится.

Добавление элементов в контейнер

Динамическое создание интерфейса часто выполняется через appendChild, insertAdjacentHTML, innerHTML или современные фреймворки.

Пример создания нового tabbable-элемента:

const button = document.createElement('button');
button.textContent = 'Новая кнопка';

const container = document.querySelector('#panel');
container.appendChild(button);

Кнопка автоматически становится tabbable-элементом, поскольку:

  • тег <button> фокусируемый по умолчанию;
  • отсутствует tabindex="-1";
  • элемент не скрыт стилями.

При повторном анализе:

import { tabbable } from 'tabbable';

const elements = tabbable(container);

новая кнопка будет включена в результат.

Добавление элементов с атрибутом tabindex

Элемент можно сделать tabbable вручную при помощи tabindex.

const div = document.createElement('div');
div.setAttribute('tabindex', '0');
div.textContent = 'Фокусируемый блок';

container.appendChild(div);

Значения tabindex:

Значение Поведение
0 элемент участвует в обычной последовательности Tab
>0 задаёт приоритет в порядке фокуса
-1 элемент можно сфокусировать программно, но не через Tab

Tabbable учитывает эти правила при формировании списка элементов.

Проверка добавленного элемента

После динамического создания элемента может потребоваться проверить его статус.

import { isTabbable } from 'tabbable';

const element = document.querySelector('.dynamic');

console.log(isTabbable(element));

Функция возвращает:

  • true — элемент участвует в Tab-навигации;
  • false — элемент не входит в последовательность.

Проверка особенно полезна в интерфейсах, где поведение элементов зависит от условий.

Добавление группы элементов

В интерфейсах часто создаются целые блоки элементов: формы, списки действий, диалоги.

Пример динамической формы:

const form = document.createElement('form');

form.innerHTML = `
  <input type="text" placeholder="Имя">
  <input type="email" placeholder="Email">
  <button type="submit">Отправить</button>
`;

document.body.appendChild(form);

Все элементы формы автоматически становятся tabbable, если:

  • они не отключены (disabled);
  • не скрыты (display: none, visibility: hidden);
  • не находятся внутри скрытого контейнера.

Получение списка:

import { tabbable } from 'tabbable';

const fields = tabbable(form);

Вставка элементов в определённое место DOM

Порядок элементов в DOM напрямую влияет на порядок навигации клавишей Tab.

Пример вставки:

const newInput = document.createElement('input');

const reference = document.querySelector('#email');
reference.after(newInput);

Теперь последовательность фокуса изменится:

  1. предыдущие элементы
  2. #email
  3. новый input
  4. последующие элементы

Tabbable учитывает реальный порядок узлов в DOM, если tabindex не переопределяет его.

Добавление элементов в скрытые контейнеры

Если элемент добавляется в контейнер, который скрыт стилями, он не считается tabbable.

Пример:

const panel = document.querySelector('#hiddenPanel');

panel.style.display = 'none';

const input = document.createElement('input');
panel.appendChild(input);

Проверка:

tabbable(panel)

вернёт пустой список.

Причина: элементы внутри display: none не участвуют в навигации.

После отображения:

panel.style.display = 'block';

элементы становятся доступными для Tab.

Влияние disabled-состояния

При динамическом добавлении элементов необходимо учитывать состояние disabled.

const button = document.createElement('button');
button.disabled = true;

container.appendChild(button);

Такой элемент:

  • фокусируем программно
  • не tabbable

Проверка:

isTabbable(button); // false

После удаления атрибута:

button.disabled = false;

элемент начинает участвовать в Tab-навигации.

Добавление элементов внутри Shadow DOM

Современные компоненты часто используют Shadow DOM. Tabbable поддерживает такие структуры, если они доступны для обхода.

Пример компонента:

const host = document.querySelector('#component');
const shadow = host.attachShadow({ mode: 'open' });

shadow.innerHTML = `
  <button>Shadow Button</button>
`;

При использовании:

tabbable(host)

результат зависит от конфигурации обхода Shadow DOM.

В сложных интерфейсах необходимо учитывать:

  • границы ShadowRoot
  • порядок фокуса внутри компонента
  • передачу фокуса между хостом и внутренними элементами

Использование MutationObserver

При активной динамике интерфейса часто применяется MutationObserver. Он позволяет отслеживать изменения DOM и выполнять повторный анализ tabbable-элементов.

Пример:

const observer = new MutationObserver(() => {
  const elements = tabbable(document.body);
  console.log('Tabbable elements:', elements.length);
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});

Теперь при каждом добавлении элемента список обновляется автоматически.

Добавление элементов в модальные окна

Модальные окна часто создаются динамически и должны ограничивать навигацию клавишей Tab.

Пример создания:

const modal = document.createElement('div');

modal.innerHTML = `
  <button>Закрыть</button>
  <input type="text">
  <button>Сохранить</button>
`;

document.body.appendChild(modal);

Получение списка tabbable:

const elements = tabbable(modal);

Эти элементы формируют циклическую навигацию внутри модального окна, которая используется в библиотеках управления фокусом (например, focus-trap).

Удаление и повторное добавление элементов

При удалении узлов из DOM они автоматически исчезают из списка tabbable-элементов.

Пример:

button.remove();

После повторного добавления:

container.appendChild(button);

элемент снова будет найден функцией tabbable.

Это происходит потому, что библиотека не кеширует результаты, а каждый раз анализирует DOM заново.

Оптимизация при большом количестве элементов

В сложных интерфейсах может существовать большое число фокусируемых элементов. Повторные вызовы tabbable() на всём документе могут создавать лишнюю нагрузку.

Практика оптимизации:

  • анализ только конкретного контейнера
  • вызов функции только при необходимости
  • использование MutationObserver с фильтрацией изменений

Пример ограниченного анализа:

const dialog = document.querySelector('#dialog');

const elements = tabbable(dialog);

Это значительно быстрее, чем анализ всего document.body.

Особенности работы с фреймворками

Во фреймворках (React, Vue, Angular) элементы добавляются через виртуальный DOM. Tabbable взаимодействует с реальным DOM, поэтому анализ выполняется после завершения рендера.

Типичный сценарий:

  1. компонент монтируется
  2. элементы появляются в DOM
  3. вызывается tabbable(container)

В React это часто выполняется внутри useEffect.

Поведение при асинхронной загрузке интерфейса

Элементы могут появляться после сетевых запросов.

Пример:

fetch('/data')
  .then(r => r.json())
  .then(data => {
    const button = document.createElement('button');
    button.textContent = data.label;

    container.appendChild(button);
  });

После выполнения запроса новый элемент становится частью навигации.

Для обновления списка:

const elements = tabbable(container);

Проверка контейнера перед добавлением

Если элемент добавляется в контейнер, который сам не находится в документе, он не будет учитываться в навигации.

Пример:

const wrapper = document.createElement('div');

const input = document.createElement('input');
wrapper.appendChild(input);

Пока контейнер не добавлен:

document.body.appendChild(wrapper);

элементы внутри него не участвуют в таб-навигации страницы.

Роль структуры DOM в порядке навигации

Порядок Tab формируется из трёх факторов:

  1. значения tabindex
  2. порядок элементов в DOM
  3. тип элемента

При добавлении элементов важно учитывать, что изменение структуры DOM может полностью изменить порядок фокуса.

Tabbable воспроизводит именно тот порядок, который будет использовать браузер.

Ключевые особенности работы с динамическими элементами

  • библиотека анализирует текущий DOM
  • новые элементы автоматически учитываются
  • результаты не кешируются
  • порядок фокуса зависит от структуры документа
  • скрытые и отключённые элементы исключаются из списка
  • повторный вызов API отражает все изменения

Динамическое добавление элементов в DOM не требует специальной интеграции с Tabbable. Достаточно повторного вызова функций библиотеки после изменения структуры документа.

Оглавление