Выборка по идентификатору

Umbrella JS предоставляет простой и лаконичный интерфейс для работы с DOM. Одной из базовых операций является выборка элементов по идентификатору. В отличие от стандартного document.getElementById, Umbrella JS позволяет сразу обрабатывать выбранные элементы в цепочке методов, что делает код более читаемым и компактным.

Основной синтаксис

Выборка элемента по идентификатору осуществляется с помощью функции u():

u('#elementId')
  • Символ # указывает, что поиск ведется по ID.
  • elementId — значение атрибута id элемента, который требуется выбрать.

Результатом вызова является объект Umbrella, содержащий выбранный элемент. Даже если элемент один, возвращается коллекция, что обеспечивает единый интерфейс для всех методов библиотеки.

Пример базового использования

u('#header').addClass('active');

В этом примере элемент с id="header" получает класс active. Благодаря тому, что возвращается объект Umbrella, можно сразу применять методы для модификации класса, стилизации, работы с событиями или атрибутами.

Доступ к нативному DOM-элементу

Иногда требуется обратиться к самому DOM-элементу, например для использования нестандартных свойств или методов, которых нет в Umbrella:

const headerElement = u('#header').get(0);
console.log(headerElement.innerText);

Метод .get(index) возвращает нативный элемент по индексу в коллекции. В случае ID обычно используется индекс 0.

Работа с событиями

Выборка по идентификатору позволяет сразу добавлять обработчики событий:

u('#button').on('click', function() {
    console.log('Кнопка нажата');
});
  • Метод .on(event, handler) регистрирует обработчик события для выбранного элемента.
  • Поддерживаются все стандартные события: click, input, mouseover, keydown и др.

Модификация содержимого и атрибутов

Umbrella JS упрощает изменение текста и атрибутов выбранного элемента:

u('#title').text('Новый заголовок');
u('#link').attr('href', 'https://example.com');
  • .text(content) заменяет текстовое содержимое элемента.
  • .attr(name, value) устанавливает значение атрибута.

Можно одновременно читать значения:

const currentHref = u('#link').attr('href');
console.log(currentHref);

Работа со стилями

Выборка по ID позволяет управлять CSS-свойствами напрямую:

u('#box').css({
    'background-color': 'blue',
    'width': '200px',
    'height': '100px'
});
  • Метод .css(object) принимает объект с ключами, соответствующими CSS-свойствам, и устанавливает указанные значения.
  • Можно использовать также .css('property') для чтения текущего значения свойства.

Цепочка методов

Umbrella JS поддерживает цепочки методов, что особенно удобно при работе с элементами по идентификатору:

u('#card')
    .addClass('highlight')
    .css('border', '1px solid red')
    .on('mouseenter', function() {
        u(this).css('background-color', 'yellow');
    });

Все методы возвращают объект Umbrella, что позволяет выстраивать длинные цепочки операций без повторного поиска элемента.

Отличие от других методов выбора

  • document.getElementById('id') возвращает один нативный элемент, с которым нужно отдельно работать.
  • u('#id') всегда возвращает коллекцию, даже если элемент один. Это унифицирует работу с методами Umbrella.
  • Можно использовать ID вместе с другими селекторами в одном выражении:
u('#form input[type="text"]').val('Пример текста');

Здесь сначала выбирается элемент с ID form, а затем все вложенные input[type="text"].

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

  1. Использовать ID для уникальных элементов — выборка по идентификатору самая быстрая и однозначная.
  2. Всегда возвращается объект Umbrella — это позволяет сразу применять методы библиотеки без дополнительных преобразований.
  3. Для доступа к нативному элементу использовать .get(0) — удобно для интеграции с другими библиотеками или API браузера.
  4. Комбинировать с цепочками методов — значительно упрощает код и уменьшает количество строк.

Выборка по идентификатору в Umbrella JS обеспечивает компактный, читаемый и универсальный способ взаимодействия с DOM, сочетая скорость поиска с гибкостью методов библиотеки.

Оглавление