Парсинг данных

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

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

Для работы с элементами используется функция $. Она возвращает объект Dom7, поддерживающий цепочку методов.

const items = $('.item'); // выбирает все элементы с классом item
const header = $('#header'); // выбирает элемент с id header

Особенности выбора:

  • Можно использовать любые CSS-селекторы.
  • Результат всегда объект Dom7, даже если выбран один элемент.
  • Методы Dom7 работают сразу со всеми выбранными элементами.

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

Dom7 предоставляет методы для обхода DOM-дерева:

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

Пример:

const firstChild = $('#list').children().eq(0); // первый дочерний элемент списка
const parentDiv = $('.item').parent('.container'); // ближайший родитель с классом container

Манипуляции с содержимым

Dom7 позволяет легко работать с HTML и текстом элементов:

  • .html() — возвращает или устанавливает HTML-содержимое.
  • .text() — возвращает или устанавливает текстовое содержимое.
  • .append(content) — добавляет HTML или элементы внутрь выбранных элементов.
  • .prepend(content) — вставляет содержимое в начало элементов.
  • .remove() — удаляет выбранные элементы из DOM.
$('.item').html('<strong>Новый текст</strong>');
$('#container').append('<div class="new">Добавленный элемент</div>');

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

  • .attr(name) / .attr(name, value) — получение или установка атрибутов.
  • .removeAttr(name) — удаляет атрибут.
  • .addClass(className) — добавляет класс.
  • .removeClass(className) — удаляет класс.
  • .toggleClass(className) — переключает класс.
$('#link').attr('href', 'https://example.com');
$('.item').addClass('active');

Обработка событий

Dom7 упрощает работу с событиями:

  • .on(event, handler) — добавляет обработчик события.
  • .off(event, handler) — удаляет обработчик.
  • .once(event, handler) — обработчик срабатывает только один раз.
  • .trigger(eventName) — инициирует событие на элементе.

Пример:

$('.btn').on('click', function(e) {
    console.log('Кнопка нажата');
});

Парсинг данных из DOM

Парсинг данных чаще всего включает получение значений атрибутов, текста, HTML-контента и обработку списков элементов. Dom7 обеспечивает простые методы для этого.

Получение данных из отдельных элементов
const text = $('.title').text(); // извлекает текст
const html = $('#content').html(); // извлекает HTML
const href = $('#link').attr('href'); // извлекает значение атрибута
Итерация по коллекциям

Метод .each(callback) позволяет проходить по каждому элементу объекта Dom7:

$('.item').each(function(index, el) {
    console.log(index, $(el).text());
});

Особенности:

  • index — позиция элемента в коллекции.
  • el — сам DOM-элемент (не Dom7 объект).
  • Для применения методов Dom7 внутри .each требуется оборачивать el в $().
Сбор данных в массив

Dom7 позволяет собирать массив значений с помощью map или комбинации .each:

const texts = [];
$('.item').each(function(_, el) {
    texts.push($(el).text());
});

Или используя .map (возвращает массив):

const texts = $('.item').map(el => $(el).text());

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

Dom7 поддерживает фильтрацию элементов:

  • .filter(selector) — оставляет только элементы, соответствующие селектору.
  • .not(selector) — исключает элементы, соответствующие селектору.
const activeItems = $('.item').filter('.active');
const inactiveItems = $('.item').not('.active');

Работа с формами и пользовательскими данными

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

  • .val() — получение или установка значения элементов input, textarea, select.
  • .prop(name) / .prop(name, value) — работа с DOM-свойствами.

Пример:

const inputValue = $('#name').val();
$('#email').val('test@example.com');

Для хранения произвольных данных:

  • .data(key) / .data(key, value) — позволяет хранить данные прямо на элементе без изменения DOM-атрибутов.
$('#item').data('id', 123);
const id = $('#item').data('id');

Асинхронная работа и обработка событий

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

$(document).on('DOMContentLoaded', function() {
    const titles = $('.title').map(el => $(el).text());
    console.log(titles);
});

Оптимизация парсинга

При работе с большим количеством элементов Dom7 обеспечивает цепочку методов, что сокращает количество обращений к DOM:

const activeTexts = $('.item')
    .filter('.active')
    .map(el => $(el).text());

Такой подход снижает нагрузку на браузер и делает код более читаемым и лаконичным.

Интеграция с AJAX

Хотя Dom7 не предоставляет встроенных средств для AJAX, библиотека легко сочетается с fetch и другими современными методами получения данных. После загрузки HTML можно парсить его с помощью Dom7:

fetch('/items.html')
    .then(res => res.text())
    .then(htmlString => {
        const tempDiv = $('<div>').html(htmlString);
        const items = tempDiv.find('.item').map(el => $(el).text());
        console.log(items);
    });

Расширяемость и плагины

Dom7 легко расширяется через добавление пользовательских функций:

$.fn.getDataAttributes = function() {
    return this.map(el => $(el).data());
};

const data = $('.item').getDataAttributes();

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

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

Оглавление