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

Bliss.js представляет собой лёгкую и мощную библиотеку для работы с DOM, упрощающую поиск и манипуляцию элементами. Основной функционал по выбору элементов построен на удобных, лаконичных методах, которые сокращают привычный синтаксис стандартного document.querySelector и document.querySelectorAll.

Основные методы выбора элементов

  1. $ — поиск одного элемента

Метод $ возвращает первый элемент, который соответствует CSS-селектору. Его использование аналогично document.querySelector, но с более компактным синтаксисом:

var button = $('.btn-primary');

Если элемент не найден, возвращается null, что позволяет легко проверять результат:

if ($('.non-existent')) {
    // элемент найден
} else {
    // элемент отсутствует
}
  1. $$ — поиск всех элементов

Метод $$ возвращает массив всех элементов, соответствующих селектору, что удобно для перебора с методами массива:

var items = $$('.menu-item');
items.forEach(function(item) {
    item.classList.add('highlight');
});

В отличие от document.querySelectorAll, возвращается полноценный массив, а не NodeList, что устраняет необходимость использовать Array.from или forEach для перебора.

Вложенные выборки

Bliss.js позволяет выполнять выборку элементов относительно конкретного родителя. Методы $ и $$ могут применяться к любому элементу:

var container = $('#container');
var links = container.$$('a');

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

Выбор по атрибутам и псевдоклассам

Библиотека поддерживает все стандартные CSS-селекторы, включая атрибуты и псевдоклассы:

var requiredInputs = $$('input[required]');
var firstVisible = $$('div:not(.hidden)');

С помощью Bliss.js можно легко комбинировать селекторы для сложных условий:

var activeItems = $$('.list-item.active[data-type="primary"]');

Методы фильтрации и обхода

Bliss.js расширяет выборку встроенными методами для фильтрации и навигации по DOM:

  • filter — фильтрация элементов по условию:
var visibleItems = $$('.item').filter(function(el) {
    return el.offsetParent !== null;
});
  • find — поиск дочерних элементов внутри выбранных элементов:
var firstLinks = $$('.menu').find('a');
  • closest — поиск ближайшего родителя по селектору:
var form = $('.submit-button').closest('form');
  • parent и children — навигация по дереву DOM:
var parentDiv = $('#element').parent();
var childItems = $('#list').children();

Эти методы позволяют работать с DOM как с цепочкой объектов, сокращая количество повторных запросов.

Сравнение с нативным DOM

Функция Bliss.js Нативный JS
Выбор одного элемента $() document.querySelector()
Выбор нескольких $$() document.querySelectorAll()
NodeList → массив автоматически Array.from()
Фильтрация .filter() требуется Array.from + filter
Вложенные выборки element.$() element.querySelector()
Навигация .parent(), .children() parentNode, .children

Bliss.js делает код более читаемым и сокращает шаблонные конструкции, особенно при работе с динамическим DOM.

Практические примеры

  1. Активировать первую вкладку и скрыть остальные:
var tabs = $$('.tab');
tabs.forEach(function(tab, index) {
    tab.classList.toggle('active', index === 0);
});
  1. Добавить событие на все кнопки внутри формы:
$('#form').$$('button').forEach(function(btn) {
    btn.addEventListener('click', function() {
        console.log('Нажата кнопка', btn.textContent);
    });
});
  1. Выбор элементов с определённым атрибутом и изменение стиля:
$$('input[data-required="true"]').forEach(function(input) {
    input.style.border = '1px solid red';
});

Особенности производительности

Bliss.js использует внутренние оптимизации, поэтому при работе с большими DOM-структурами:

  • Ограничение области поиска через родителя (element.$() / element.$$()) сокращает время выполнения.
  • Преобразование в массив позволяет сразу применять методы map, filter, forEach, минимизируя дополнительный код.
  • Методы навигации по DOM не требуют повторного поиска через селекторы, что уменьшает количество обращений к дереву документа.

Выбор элементов в Bliss.js сочетает лаконичность синтаксиса с гибкостью стандартного CSS. Сочетание методов $, $$, навигационных функций и фильтрации позволяет создавать чистый, структурированный и легко читаемый код для сложных интерфейсов.

Оглавление