Полный список методов селекции

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

Инициализация и базовая селекция

Для создания объекта Dom7 используется $:

const $$ = Dom7;
const elements = $$('div'); // выбор всех <div> на странице
  • $$('селектор') — выбирает элементы по CSS-селектору.
  • $$([элементы]) — создаёт объект Dom7 из массива DOM-узлов.
  • $$('элемент') — если передан одиночный DOM-элемент, возвращается коллекция из одного элемента.

Выбор элементов по CSS-селектору

Метод $$(selector) позволяет использовать любой CSS-селектор:

const items = $$('ul li.active'); // все элементы <li> с классом active внутри <ul>

Поддерживаются селекторы:

  • Классы (.classname)
  • ID (#id)
  • Атрибуты ([attr=value])
  • Псевдоклассы (:first-child, :last-child и другие)

Dom7 возвращает коллекцию, даже если найден один элемент.

Поиск внутри коллекции

После выбора элементов можно искать внутри них:

const list = $$('ul');
const activeItems = list.find('li.active');

Метод .find(selector) возвращает новую коллекцию Dom7, содержащую все элементы, соответствующие селектору, внутри исходной коллекции.

Родственные элементы

Dom7 предоставляет методы для перемещения по DOM-дереву:

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

Пример:

const activeItem = $$('li.active');
const parentList = activeItem.parent('ul'); 
const allSiblings = activeItem.siblings();

Фильтрация элементов

Для выборки элементов из уже существующей коллекции применяются методы:

  • .filter(selector) — возвращает только элементы, соответствующие селектору.
  • .not(selector) — возвращает элементы, не соответствующие селектору.
  • .eq(index) — возвращает элемент с указанным индексом в коллекции.
  • .first() и .last() — возвращают первый и последний элемент коллекции.
const items = $$('li');
const firstItem = items.first();
const filteredItems = items.filter('.active');

Работа с индексами

  • .index() — возвращает индекс элемента среди его соседей.
  • .eq(index) — позволяет получить конкретный элемент коллекции по индексу.
const items = $$('li');
const thirdItem = items.eq(2); // нумерация с нуля

Особенности работы с коллекциями

Dom7 коллекции поддерживают итерацию и цепочки методов:

$$('ul li')
  .filter('.active')
  .parent()
  .addClass('highlighted');
  • Все методы, возвращающие коллекцию, могут быть объединены в цепочку.
  • Методы вроде .find(), .children(), .siblings() всегда возвращают новый объект Dom7.

Прямой доступ к DOM-узлам

Коллекция Dom7 — это массивоподобный объект. Для доступа к отдельным DOM-элементам можно использовать индексацию:

const firstDiv = $$('div')[0]; // обычный DOM-элемент
firstDiv.textContent = 'Прямое изменение';

Также можно применять методы массивов через Array.prototype:

const texts = Array.from($$('p')).map(p => p.textContent);

Работа с селекторами атрибутов

Методы Dom7 полностью поддерживают CSS-селекторы с атрибутами:

  • [attr] — элементы с атрибутом attr.
  • [attr=value] — элементы с конкретным значением атрибута.
  • [attr^=value] — элементы, где атрибут начинается с value.
  • [attr$=value] — элементы, где атрибут оканчивается на value.
  • [attr*=value] — элементы, где атрибут содержит value.
const externalLinks = $$('a[href^="http"]');

Выборка по состоянию и типу элементов

Dom7 поддерживает псевдоклассы CSS:

  • :first-child, :last-child
  • :nth-child(n) и :nth-of-type(n)
  • :empty
  • :checked для форм
const firstItem = $$('li:first-child');
const checkedBoxes = $$('input:checked');

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

Помимо поиска, Dom7 может создавать элементы:

const newDiv = $$('<div class="new-element">Контент</div>');
$$('body').append(newDiv);
  • Любой HTML-строкой можно создать коллекцию Dom7 с одним или несколькими элементами.
  • Созданные элементы поддерживают все методы Dom7.

Резюме по методам селекции

Метод Описание
$(selector) Выбор элементов по CSS-селектору
.find(selector) Поиск внутри коллекции
.parent([selector]) Родитель элемента
.parents([selector]) Все предки до корня
.closest(selector) Ближайший родитель по селектору
.children([selector]) Прямые дочерние элементы
.siblings([selector]) Соседи на одном уровне
.filter(selector) Фильтрация коллекции
.not(selector) Исключение элементов по селектору
.first() Первый элемент коллекции
.last() Последний элемент коллекции
.eq(index) Элемент по индексу
.index() Индекс элемента среди соседей

Dom7 сочетает в себе компактность, простоту и гибкость в работе с DOM. Понимание методов селекции позволяет писать короткий, читаемый код и управлять структурой страницы без избыточного JavaScript.

Оглавление