DOM Utils Light — Легковесная библиотека для работы с DOM и SVG

Если вы часто работаете с манипуляцией DOM-элементов, вам наверняка знакома проблема громоздкости стандартных методов JavaScript.

DOM Utils Light - это компактная и удобная библиотека, позволяющая легко создавать HTML и SVG-элементы, управлять атрибутами, стилями и событиями.

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

Что такое DOM Utils Light?

DOM Utils Light — это легковесная JavaScript-библиотека, упрощающая создание и управление DOM-элементами. Она позволяет:

• Создавать HTML-элементы с вложенной структурой
• Работать с классами, атрибутами и стилями
• Добавлять обработчики событий
• Поддерживает работу с SVG-элементами
• Работает без зависимостей (Vanilla JS)

Установка

Установить dom-utils-light можно через npm:

    
npm install dom-utils-light
    

Либо подключить напрямую через ES-модули:

    
import DOMUtils from "dom-utils-light";
    

Как использовать DOM Utils Light?

1. Создание HTML-элемента

Создадим `div` с классами и текстовым содержимым:

    
const domUtils = new DOMUtils();
const div = domUtils.createElement({
    tag: 'div',
    classList: ['container', 'show'],
    props: { textContent: 'Hello, world!' },
    children: [
        {
            tag: 'a',
            classList: ['link'],
            props: {
                href: '/'
            },
            children: [
                {
                    tag: 'span',
                    props: {
                        textContent: 'Open Link'
                    }
                }
            ]
        },
    ]
});
document.body.appendChild(div);

Результат: на страницу добавится

    
 <div class="container">Hello, world! <a href="/" class="link">Open link</a></div>
    

2. Создание SVG-элементов

Библиотека поддерживает SVG, что удобно для работы с графикой.

    
const svgElement = domUtils.createElement({
    namespace: "svg",
    tag: "svg",
    attributes: { width: "100", height: "100" },
    children: [
        {
            namespace: "svg",
            tag: "circle",
            attributes: {
                cx: "50",
                cy: "50",
                r: "40",
                stroke: "black",
                "stroke-width": "3",
                fill: "red"
            }
        }
    ]
});

document.body.appendChild(svgElement);
    

Результат: Красный круг внутри SVG.

Добавление событий

    
const button = domUtils.createElement({
    tag: "button",
    props: { textContent: "Нажми меня" },
    events: {
        click: () => alert("Кнопка нажата!")
    }
});
document.body.appendChild(button);
    

Результат: При нажатии появится `alert` с сообщением.

Основные параметры config

Tag

Тип: String
Описание: Определяет HTML-тег создаваемого элемента. По умолчанию используется "div".
Пример:

    
const item = domUtils.createElement({
     { tag: "span" } // создаст пустой span
});

namespace

Тип: String
Описание: Пространство имен, если создается SVG-элемент. Для обычных HTML-элементов этот параметр не нужен.
Пример:

const svg = domUtils.createElement({
     { namespace: "svg", tag: "circle" } // создаст  внутри
});

classList

Тип: Array
Описание: Массив классов, которые будут добавлены к элементу.
Пример:

    
const svg = domUtils.createElement({
     classList: ["box", "active"] // добавит class="box active"
});
    

props

Тип: Object
Описание: Объект свойств элемента.

• textContent – текст внутри элемента.
• innerHTML – HTML-код внутри элемента.
• placeholder – плейсхолдер для input.
• type – тип input-элемента.
• name – имя input-элемента.

Пример:

    
const item = domUtils.createElement(
  props: {
    textContent: "Привет",
    placeholder: "Введите текст",
    type: "text",
    name: "username"
  }
});

attributes

Тип: Object
Описание: Объект дополнительных атрибутов элемента, включая data-*, aria-*, href, target и т. д.
Пример:

    
const item = domUtils.createElement(
attributes: { "data-id": "123", "aria-label": "Кнопка", href: "https://example.com", target: "_blank" }
});
    

styles

Тип: Object
Описание: Объект стилей (CSS), которые применяются к элементу.
Пример:

    
const item = domUtils.createElement(
  styles: { color: "red", fontSize: "16px", backgroundColor: "#f0f0f0" }
});

events

Тип: Object
Описание: Объект событий, привязываемых к элементу.
Пример:

    
const item = domUtils.createElement({
  events: {
    click: () => alert("Клик!"),
    mouseover: () => console.log("Наведение мыши")
  }
});

children

Тип: Array
Описание: Массив вложенных элементов. Каждый дочерний объект должен содержать те же параметры, что и родительский.
Пример:

    
const item = domUtils.createElement({
  tag: "div",
  children: [
    { tag: "p", props: { textContent: "Абзац" } },
    { tag: "button", props: { textContent: "Нажми меня" } }
  ]
});