Получение нативных DOM-элементов

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

Основные методы получения элементов

Dom7 использует синтаксис, похожий на jQuery, для выбора элементов. Основной метод — вызов функции Dom7(selector), обычно обозначаемой как $. Пример:

import Dom7 from 'dom7';

const $div = Dom7('div.my-class');

Здесь переменная $div содержит коллекцию элементов, соответствующих селектору div.my-class. Несмотря на обёртку, доступ к нативным элементам возможен через индекс:

const firstDiv = $div[0]; // Первый нативный DOM-элемент

Доступ к нативным элементам внутри коллекции

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

const allDivs = Dom7('div');

allDivs.forEach((el, index) => {
  console.log(el); // nативный DOM-элемент
});

Метод get() предоставляет удобный способ получения элементов:

const firstElement = $div.get(0);  // Получение первого элемента
const allElements = $div.get();    // Возврат массива всех элементов

Метод get(index) возвращает нативный DOM-элемент по указанному индексу. Если индекс отрицательный, отсчёт идёт с конца коллекции.

Получение родительских и дочерних элементов

Dom7 позволяет не только получать выбранные элементы напрямую, но и перемещаться по DOM-структуре. Для получения родителя используется метод parent():

const parent = $div.parent(); // Возвращает Dom7-объект с родительским элементом
const nativeParent = parent[0]; // Нативный DOM-элемент родителя

Для работы с потомками используется children():

const children = $div.children('.child-class'); 
const firstChild = children[0]; // Первый нативный DOM-потомок

Метод find(selector) позволяет получить все вложенные элементы, соответствующие селектору:

const nestedElements = $div.find('span.highlight');
const nativeNested = nestedElements.get(); // Массив нативных DOM-элементов

Проверка наличия элементов

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

if ($div.length > 0) {
  const nativeDiv = $div[0];
  console.log(nativeDiv.tagName); // Например, 'DIV'
}

Также метод size() возвращает количество элементов в коллекции, хотя современный стандарт рекомендует использовать свойство length:

console.log($div.length); // Количество найденных элементов

Преобразование Dom7-коллекции в массив

Для интеграции с чистым JavaScript иногда требуется преобразовать коллекцию Dom7 в обычный массив DOM-элементов:

const nativeArray = Array.from($div);

Теперь nativeArray — это стандартный массив, с которым можно использовать любые методы массива: map, filter, forEach и т.д.

Доступ к конкретным атрибутам и свойствам

Получив нативный элемент, можно использовать любые стандартные свойства и методы DOM:

const firstDiv = $div[0];
console.log(firstDiv.id);           // Получение id элемента
console.log(firstDiv.classList);    // Работа с классами
console.log(firstDiv.textContent);  // Получение текста
firstDiv.style.color = 'red';       // Изменение стиля

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

Итоговые подходы

  • Использование индекса: $el[0]
  • Метод get(index) для получения конкретного элемента
  • Преобразование коллекции в массив: Array.from($el)
  • Навигация по DOM: parent(), children(), find()

Эти инструменты позволяют гибко работать с нативными элементами, сохраняя преимущества Dom7 при выборе и манипуляции.

Если требуется, можно комбинировать методы Dom7 с чистым DOM API, что обеспечивает максимальную совместимость и контроль над структурой документа.

Оглавление