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

Dom7 — это легковесная JavaScript-библиотека, создаваемая как компактная замена jQuery, и предназначенная для работы с элементами DOM. Основная цель библиотеки — предоставление удобного интерфейса для выбора элементов, манипуляции с ними и обработки событий с минимальным объёмом кода.

Основные принципы выборки элементов

В Dom7 для выборки элементов используется функция $ (аналог jQuery). Она позволяет выбирать элементы по CSS-селекторам, переданным в качестве строки, или работать с уже существующими объектами DOM.

Примеры базовой выборки:

// Выбор всех элементов с классом "item"
const items = $('.item');

// Выбор элемента по id
const main = $('#main');

// Выбор всех элементов <p> внутри <div>
const paragraphs = $('div p');

Важно: Dom7 возвращает не обычный массив, а объект типа Dom7, который поддерживает цепочку методов для дальнейшей работы с элементами.

Работа с коллекцией элементов

Объект Dom7 ведёт себя как массивоподобная коллекция. Можно использовать индексирование и перебор:

const items = $('.item');

// Доступ к первому элементу
const firstItem = items[0];

// Перебор всех элементов
items.each((index, el) => {
  console.log(index, el);
});

Метод each работает аналогично методу forEach у массивов, но сохраняет цепочку вызовов Dom7.

Сложные селекторы

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

  • селекторы по атрибутам: [data-id="123"]
  • псевдоклассы: :first-child, :last-of-type
  • комбинированные селекторы: .menu li.active

Пример:

// Выбор всех активных пунктов меню
const activeMenuItems = $('.menu li.active');

// Выбор всех элементов с атрибутом data-role="button"
const buttons = $('[data-role="button"]');

Фильтрация и поиск внутри коллекции

После первичной выборки можно фильтровать элементы или искать дочерние элементы:

const list = $('.list');

// Фильтрация: оставить только видимые элементы
const visibleItems = list.filter(':visible');

// Поиск дочерних элементов
const childItems = list.find('li');

Методы filter и find возвращают новые объекты Dom7, что позволяет продолжать цепочку методов.

Навигация по DOM

Dom7 предоставляет удобные методы для навигации по дереву элементов:

  • parent() — возвращает родительский элемент
  • parents(selector) — возвращает всех родителей, соответствующих селектору
  • children(selector) — возвращает дочерние элементы
  • siblings(selector) — возвращает соседние элементы
  • closest(selector) — ищет ближайшего предка по селектору

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

const item = $('.item.active');

// Родительский элемент
const parent = item.parent();

// Все родительские элементы с классом "container"
const containers = item.parents('.container');

// Дочерние элементы
const children = item.children('span');

// Ближайший родитель с классом "wrapper"
const wrapper = item.closest('.wrapper');

Работа с конкретными элементами

Dom7 позволяет быстро получить первый элемент коллекции или выполнить действие с каждым элементом:

const first = $('.item').eq(0); // первый элемент
const last = $('.item').eq(-1); // последний элемент

// Выполнение функции для каждого элемента
$('.item').each((index, el) => {
  el.textContent = `Элемент ${index + 1}`;
});

Метод eq возвращает объект Dom7 с одним элементом, сохраняя цепочку методов.

Преобразование Dom7 в массив

Иногда требуется стандартный массив элементов для работы с нативными методами Jav * aScript:

const itemsArray = $('.item').toArray();
itemsArray.forEach(el => console.log(el.tagName));

Метод toArray() превращает коллекцию Dom7 в обычный массив DOM-элементов.

Создание новых элементов

Помимо выборки существующих элементов, Dom7 позволяет создавать новые:

const newDiv = $('<div class="new-item">Текст</div>');
$('body').append(newDiv);

Созданный элемент сразу становится объектом Dom7 и поддерживает все методы библиотеки.

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

Dom7 упрощает работу с выборкой по сравнению с document.querySelectorAll:

  • Поддержка цепочек методов ($('.item').find('span').addClass('highlight'))
  • Автоматическое превращение NodeList в коллекцию с методами each, filter, map
  • Удобные навигационные методы (parent, children, closest)

Резюме

  • $ — основной метод для выбора элементов.
  • Dom7 возвращает массивоподобную коллекцию с методами для фильтрации, навигации и манипуляции.
  • Поддерживаются CSS-селекторы, поиск дочерних элементов, фильтрация и создание новых элементов.
  • Навигация по DOM осуществляется через методы parent, children, siblings, closest.
  • Методы eq, each и toArray обеспечивают гибкость при работе с конкретными элементами.

Dom7 позволяет писать компактный и читаемый код для работы с элементами DOM, сохраняя привычный синтаксис jQuery, но с минимальным размером библиотеки и высокой производительностью.

Оглавление