Селекторы элементов

Driver.js предоставляет гибкий механизм указания элементов на странице для пошаговых инструкций и подсказок. Основой работы с элементами является селектор, который позволяет точно определить, к какому DOM-узлу будет применяться подсветка и подсказка.

Основные типы селекторов

  1. CSS-селекторы Driver.js поддерживает стандартные CSS-селекторы, что позволяет выбирать элементы по тегу, классу, идентификатору или их комбинации.
const driver = new Driver();

driver.defineSteps([
  {
    element: '#submit-button', // по ID
    popover: {
      title: 'Отправка формы',
      description: 'Нажмите здесь, чтобы отправить форму.'
    }
  },
  {
    element: '.nav-item.active', // по классу
    popover: {
      title: 'Активный пункт меню',
      description: 'Выбранный пункт меню подсвечен.'
    }
  }
]);
  1. Сложные селекторы Можно использовать любые сложные CSS-селекторы, включая вложенные, псевдоклассы (:nth-child, :first-child) и атрибутные селекторы ([data-role="main"]).
{
  element: 'ul.menu > li:nth-child(3) a',
  popover: {
    title: 'Третий пункт меню',
    description: 'Ссылка ведет к разделу о продуктах.'
  }
}

Селекторы по данным атрибутам

Driver.js отлично работает с data-атрибутами, что позволяет не привязываться к классам или идентификаторам, которые могут меняться. Это особенно полезно для динамических интерфейсов.

{
  element: '[data-step="checkout"]',
  popover: {
    title: 'Оформление заказа',
    description: 'Нажмите здесь, чтобы перейти к оформлению.'
  }
}

Элементы без DOM-селекторов

В некоторых случаях элемент может отсутствовать в момент инициализации. Driver.js поддерживает функции возврата элемента, что позволяет вычислять его динамически.

{
  element: () => document.querySelector('.dynamic-element'),
  popover: {
    title: 'Динамический элемент',
    description: 'Элемент может появиться позже после загрузки контента.'
  }
}

Селекторы нескольких элементов

Если нужно подсветить несколько элементов, Driver.js позволяет задавать массив элементов. Каждый из них получит отдельный шаг.

const steps = Array.from(document.querySelectorAll('.feature-item')).map((el, index) => ({
  element: el,
  popover: {
    title: `Функция ${index + 1}`,
    description: 'Описание функционального блока.'
  }
}));

driver.defineSteps(steps);

Управление видимостью и существованием элементов

Driver.js автоматически проверяет, существует ли элемент на странице перед применением шага. Если элемент не найден, шаг пропускается, что предотвращает ошибки во время выполнения.

  • Опция isSkip позволяет явно указать, что шаг нужно пропустить при отсутствии элемента:
{
  element: '#optional-element',
  popover: {
    title: 'Опциональный блок',
    description: 'Элемент может отсутствовать.'
  },
  isSkip: true
}

Практические рекомендации по селекторам

  • Предпочтительнее использовать уникальные селекторы (ID или data-атрибуты) для повышения устойчивости сценариев.
  • Для элементов динамически добавляемых в DOM лучше использовать функции, возвращающие элемент.
  • Избегать использования слишком общих селекторов (div, .btn) — это может привести к подсветке нескольких элементов одновременно.
  • Комбинированные селекторы (.menu li.active a) дают точность, но при изменении структуры страницы могут потребовать обновления.

Интеграция с JavaScript-логикой

С помощью селекторов можно комбинировать Driver.js с логикой страницы, проверяя наличие или состояние элемента перед запуском шага.

if (document.querySelector('.promo-banner')) {
  driver.defineSteps([{
    element: '.promo-banner',
    popover: {
      title: 'Акция',
      description: 'Промо-баннер с текущей акцией.'
    }
  }]);
}

Подсветка невидимых элементов

Driver.js поддерживает прокрутку до элемента. Если элемент находится за пределами видимой области, он автоматически скроллится в центр экрана. Это работает для любых селекторов, что делает их выбор критически важным для корректного отображения подсказки.

{
  element: '#footer-link',
  popover: {
    title: 'Ссылка в подвале',
    description: 'Подсказка автоматически прокрутит страницу.'
  }
}

Использование селекторов в Driver.js обеспечивает точное управление шагами и позволяет строить гибкие, надежные интерактивные руководства по интерфейсу. Сочетание CSS-селекторов, data-атрибутов и динамических функций делает библиотеку максимально универсальной для любых проектов.

Оглавление