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

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

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

Выбор элементов

const $$ = Dom7;
const elems = $$('.item'); // выбор всех элементов с классом item
  • $$(selector) — выбор элементов по CSS-селектору.
  • $(element) — обёртка существующего DOM-узла.

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

Манипуляции с классами

Добавление, удаление, проверка и переключение классов:

elems.addClass('active');        // добавление класса ко всем элементам
elems.removeClass('inactive');   // удаление класса
elems.toggleClass('highlight');  // переключение класса
const has = elems.hasClass('visible'); // проверка наличия класса у первого элемента
  • Методы addClass, removeClass, toggleClass применяются ко всей коллекции.
  • hasClass всегда возвращает булево значение по первому элементу коллекции.

Работа с атрибутами

elems.attr('data-id');            // получение атрибута первого элемента
elems.attr('data-id', '123');     // установка атрибута для всех элементов
elems.removeAttr('disabled');     // удаление атрибута
  • Можно устанавливать несколько атрибутов сразу, передав объект:
elems.attr({ 'id': 'main', 'role': 'button' });

Работа с содержимым

Текст, HTML и значения полей форм:

elems.text();             // получение текста первого элемента
elems.text('Привет');     // установка текста для всех элементов

elems.html();             // получение HTML содержимого
elems.html('<span>Текст</span>'); // установка HTML

elems.val();              // получение значения формы
elems.val('новое значение'); // установка значения

Манипуляции с DOM

Добавление и удаление элементов:

elems.append('<p>Новый элемент</p>');      // добавить внутрь каждого элемента в конец
elems.prepend('<p>В начало</p>');          // добавить внутрь каждого элемента в начало
elems.before('<p>Перед элементом</p>');    // добавить перед каждым элементом
elems.after('<p>После элемента</p>');      // добавить после каждого элемента
elems.remove();                             // удалить все элементы коллекции

Клонирование элементов:

const clone = elems.clone();
  • clone() создает копию элементов вместе с их атрибутами и событиями.

Управление стилями

elems.css('color');                 // получение стиля первого элемента
elems.css('color', 'red');          // установка стиля для всех элементов
elems.css({ 'background': 'blue', 'font-size': '16px' }); // несколько стилей одновременно
  • Поддерживаются стандартные CSS-свойства, запись может быть в camelCase или kebab-case.

Работа с размерами и позиционированием

elems.width();        // ширина первого элемента
elems.height();       // высота первого элемента

elems.offset();       // возвращает объект {top, left} относительно документа
elems.position();     // возвращает объект {top, left} относительно родителя
  • Эти методы не только получают значения, но могут использоваться для установки размеров, если передать число или строку с единицами.

События

Добавление и удаление обработчиков:

function onClick(e) { console.log('clicked'); }

elems.on('click', onClick);   // добавить обработчик
elems.off('click', onClick);  // удалить обработчик
  • Методы поддерживают несколько событий через пробел: 'click mouseenter'.
  • Можно использовать делегирование:
elems.on('click', '.child', onClick);

Одноразовые обработчики:

elems.once('click', () => console.log('один раз'));

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

elems.parent();       // родитель всех элементов коллекции
elems.parents('.box'); // все родительские элементы, соответствующие селектору
elems.children();     // все дочерние элементы
elems.find('.sub');   // поиск внутри всех элементов коллекции
elems.siblings();     // все соседние элементы
elems.next();         // следующий элемент
elems.prev();         // предыдущий элемент
  • Методы возвращают новую коллекцию Dom7, что позволяет строить цепочки.

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

elems.filter('.active'); // фильтрует элементы по селектору или функции
elems.eq(0);             // возвращает элемент по индексу в коллекции
elems.first();           // первый элемент
elems.last();            // последний элемент
  • Методы создают новую коллекцию, не изменяя исходную.

Анимации и эффекты

elems.show();    // показать элемент (display: block)
elems.hide();    // скрыть элемент (display: none)
elems.toggle();  // переключение видимости
  • Эти методы управляют только стилем display, без сложных анимаций.
  • Для плавных эффектов обычно используют CSS-переходы вместе с Dom7.

Удобные вспомогательные методы

elems.each((index, el) => { console.log(el, index); }); // итерация по коллекции
elems.index(); // индекс элемента среди соседей
elems.is('.active'); // проверка соответствия селектору
  • each позволяет выполнять любые операции над элементами без выхода из цепочки методов.
  • is проверяет соответствие первого элемента коллекции селектору.

Особенности использования

  • Dom7 работает с коллекциями, даже если элемент один.
  • Методы поддерживают цепочки, позволяя писать компактный код:
$$('.item').addClass('active').css('color', 'red').on('click', handleClick);
  • Совместимость с современными браузерами и минимальная нагрузка делают Dom7 удобным инструментом для интерактивных веб-интерфейсов.
Оглавление