DOM Методы

Методы для манипуляции, обхода, создания и управления стилями DOM-элементов.

Список методов

Создание и манипуляция элементами

Метод	Сигнатура	Описание
`make`	`<T extends HTMLElement = HTMLElement>(name: string, callback?: (el: T) => void): T`	Создает новый HTML-элемент.
`makeText`	`(content: string): Text`	Создает новый текстовый узел.
`remove`	`(element: Element \| Element[] \| NodeListOf<Element>): void`	Удаляет элемент из его родителя в DOM.
`empty`	`<T extends HTMLElement = HTMLElement>(el: T): T`	Удаляет все дочерние узлы из элемента.

Работа с дочерними элементами

Метод	Сигнатура	Описание
`append`	`<T extends DomNode = DomNode>(el: T, child: DomChildNode): T`	Добавляет дочерний узел в конец родительского элемента.
`prepend`	`<T extends DomNode = DomNode>(el: T, child: DomChildNode): T`	Добавляет дочерний узел в начало родительского элемента.
`before`	`<T extends Element>(el: T, child?: DomChildNode): T \| Element \| null`	Вставляет узел перед указанным элементом или возвращает предыдущий соседний элемент.
`after`	`<T extends Element>(el: T, child?: DomChildNode): T \| Element \| null`	Вставляет узел после указанного элемента или возвращает следующий соседний элемент.
`replaceWithChildren`	`(element: HTMLElement): void`	Заменяет элемент его дочерними узлами.

Работа с HTML и текстом

Метод	Сигнатура	Описание
`html`	`(el: HTMLElement, value?: string \| null): string; (el: HTMLElement, value: string): HTMLElement`	Получает или устанавливает `innerHTML` элемента.
`text`	`<T extends DomNode = DomNode>(el: T): string; (el: T, value: string): T`	Получает или устанавливает текстовое содержимое элемента.
`toHtml`	`(data: string \| Node \| Node[] \| HTMLElement \| HTMLElement[]): string`	Преобразует узел, элемент или строку в HTML-строку.
`appendText`	`(el: DomNode, text: string): DomNode`	Добавляет текстовый узел к элементу.
`toTextNode`	`(text: string): Node`	Создает текстовый узел из строки.
`getText`	`(node: Node \| Node[]): string`	Возвращает объединенный `textContent` узла или массива узлов.
`getLength`	`(node: Node \| Node[]): number`	Возвращает общую длину текста узла или массива узлов.
`mergeAdjacentTextNodes`	`(element: HTMLElement): void`	Объединяет соседние текстовые узлы в один.

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

Метод	Сигнатура	Описание
`hasClass`	`(element: HTMLElement \| null, className: string): boolean`	Проверяет, есть ли у элемента указанный CSS-класс.
`addClass`	`(el: HTMLElement, className: string \| string[]): void`	Добавляет один или несколько CSS-классов к элементу.
`removeClass`	`(el: HTMLElement, className: string \| string[]): void`	Удаляет один или несколько CSS-классов из элемента.
`toggleClass`	`(el: HTMLElement, className: string \| string[]): void`	Переключает один или несколько CSS-классов на элементе.

Работа со стилями

Метод	Сигнатура	Описание
`css`	`(element: HTMLElement, prop: string \| Record<string, string \| number \| null>, value?: string \| number \| null): string`	Получает или устанавливает CSS-стили.

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

Метод	Сигнатура	Описание
`attr`	`(el: Element \| HTMLElement, key: string \| Record<string, string>, value?: string): string \| undefined \| void`	Получает или устанавливает атрибут элемента.
`removeAttr`	`(el: Element \| HTMLElement, attrName: string \| string[]): void`	Удаляет атрибут или массив атрибутов из элемента.
`data`	`(el: HTMLElement, key: string \| Record<string, string>, value?: string): string \| undefined \| void`	Получает или устанавливает `data-*` атрибут элемента.
`dataByPrefix`	`(element: HTMLElement, prefix: string): Record<string, string \| number>`	Получает все `data-*` атрибуты, начинающиеся с указанного префикса.

Чтение и запись значений

Метод	Сигнатура	Описание
`val`	`(el: ValueElement): string; (el: ValueElement, value: string): ValueElement`	Получает или устанавливает значение элемента формы.

Поиск и навигация

Метод	Сигнатура	Описание
`query`	`<T extends Element = Element>(selector: string, callback: (el: T, index: number) => void, context: Element \| Document = document): number`	Выполняет поиск элементов по CSS-селектору и выполняет callback для каждого.
`queryList`	`<T extends Element = Element>(selector: string, context: Element \| Document = document): T[]`	Возвращает массив всех элементов, соответствующих CSS-селектору.
`queryLength`	`(selector: string, context: Element \| Document = document): number`	Возвращает количество элементов, соответствующих CSS-селектору.
`closest`	`<C extends Node = HTMLElement, P extends Node = HTMLElement>(child: C \| EventTarget \| null, parent: P \| EventTarget \| null): P \| false`	Возвращает родительский элемент, если он найден в иерархии.
`getChildNodes`	`(element: Node): Node[]`	Возвращает массив всех дочерних узлов элемента.

Видимость

Метод	Сигнатура	Описание
`show`	`(el: HTMLElement): void`	Показывает ранее скрытый элемент.
`hide`	`(el: HTMLElement): void`	Скрывает элемент.
`toggle`	`(el: HTMLElement): void`	Переключает видимость элемента.

Размеры и позиция

Метод	Сигнатура	Описание
`rect`	`(el: HTMLElement): DOMRect`	Возвращает объект `DOMRect` с координатами и размерами элемента.
`offset`	`(el: HTMLElement): { top: number; left: number }`	Возвращает позицию элемента относительно документа.
`position`	`(el: HTMLElement): { top: number; left: number }`	Возвращает позицию элемента относительно его `offsetParent`.
`width`	`<T extends HTMLElement = HTMLElement>(el: T): number; (el: T, value: number \| string): T`	Получает или устанавливает ширину содержимого элемента (без padding, border, margin).
`height`	`<T extends HTMLElement = HTMLElement>(el: T): number; (el: T, value: number \| string): T`	Получает или устанавливает высоту содержимого элемента (без padding, border, margin).
`innerWidth`	`<T extends HTMLElement = HTMLElement>(el: T): number; (el: T, value: number \| string): T`	Получает или устанавливает внутреннюю ширину элемента (content + padding).
`innerHeight`	`<T extends HTMLElement = HTMLElement>(el: T): number; (el: T, value: number \| string): T`	Получает или устанавливает внутреннюю высоту элемента (content + padding).
`outerWidth`	`<T extends HTMLElement = HTMLElement>(el: T, includeMargin?: boolean): number`	Получает внешнюю ширину элемента (content + padding + border + margin, если указано).
`outerHeight`	`<T extends HTMLElement = HTMLElement>(el: T, includeMargin?: boolean): number`	Получает внешнюю высоту элемента (content + padding + border + margin, если указано).
`outerSize`	`<T extends HTMLElement = HTMLElement>(el: T): { width: number; height: number }`	Возвращает внешние размеры элемента, включая margin.
`scrollTop`	`<T extends ScrollableElement = ScrollableElement>(el: T): number; (el: T, value: number): T`	Получает или устанавливает вертикальную позицию прокрутки.
`scrollLeft`	`<T extends ScrollableElement = ScrollableElement>(el: T): number; (el: T, value: number): T`	Получает или устанавливает горизонтальную позицию прокрутки.

Примеры использования

Создание и манипуляция элементами

1. `make`

typescript

import { make } from 'snappykit';

const div = make('div');

// С аргументом обратного вызова
const divWithCallback = make('div', (el) => {
  el.textContent = 'Hello, World!';
});

// С использованием типов
const input = make<HTMLInputElement>('input', (el) => {
  el.value = 'Hello';
});

2. `makeText`

typescript

import { makeText, append } from 'snappykit';

const textNode = makeText('Hello, World!');
append(document.body, textNode);

3. `remove`

typescript

import { make, remove, append } from 'snappykit';

const div = make('div');
append(document.body, div);
remove(div); // Удаляет элемент из DOM
remove([div, ...]); // или массив элементов

4. `empty`

typescript

import { make, empty, append } from 'snappykit';

const div = make('div');
append(div, make('p', (el) => el.textContent = 'Hello'));
empty(div); // Удаляет все дочерние узлы

Работа с дочерними элементами

5. `append`

typescript

import { make, append } from 'snappykit';

const parent = make('div');
const child = make('p', (el) => el.textContent = 'Hello');
append(parent, child);
append(parent, [child, ...]); // или массив элементов

6. `prepend`

typescript

import { make, prepend } from 'snappykit';

const parent = make('div');
const child = make('p', (el) => el.textContent = 'Hello');
prepend(parent, child);
prepend(parent, [child, ...]); // или массив элементов

7. `before`

typescript

import { make, before, append } from 'snappykit';

const reference = make('div');
const newElement = make('p', (el) => el.textContent = 'Before');
append(document.body, reference);
before(reference, newElement);
before(reference, [newElement, ...]); // или массив элементов

// Получение предыдущего соседа
const prevSibling = before(reference);
console.log(prevSibling); // null или предыдущий элемент

8. `after`

typescript

import { make, after, append } from 'snappykit';

const reference = make('div');
const newElement = make('p', (el) => el.textContent = 'After');
append(document.body, reference);
after(reference, newElement);
after(reference, [newElement, ...]); // или массив элементов

// Получение следующего соседа
const nextSibling = after(reference);
console.log(nextSibling); // null или следующий элемент

9. `replaceWithChildren`

typescript

import { make, append, replaceWithChildren } from 'snappykit';

const parent = make('div');
const child1 = make('p', (el) => el.textContent = 'Hello');
const child2 = make('p', (el) => el.textContent = 'World');
append(parent, [child1, child2]);
replaceWithChildren(parent); // Заменяет родительский элемент его дочерними узлами

Работа с HTML и текстом

10. `html`

typescript

import { make, html } from 'snappykit';

const div = make('div');
html(div, '<p>Hello, World!</p>'); // Установка HTML
console.log(html(div)); // Получение HTML: '<p>Hello, World!</p>'

11. `text`

typescript

import { make, text } from 'snappykit';

const div = make('div');
text(div, 'Hello, World!'); // Установка текста
console.log(text(div)); // Получение текста: 'Hello, World!'

12. `toHtml`

typescript

import { make, toHtml } from 'snappykit';

const div = make('div', (el) => {
  el.innerHTML = '<p>Hello</p>';
});
console.log(toHtml(div)); // '<div><p>Hello</p></div>'

13. `appendText`

typescript

import { make, appendText } from 'snappykit';

const div = make('div');
appendText(div, 'Hello, World!');

14. `toTextNode`

typescript

import { toTextNode, append } from 'snappykit';

const textNode = toTextNode('Hello, World!');
append(document.body, textNode);

15. `getText`

typescript

import { make, appendText, getText } from 'snappykit';

const div = make('div');
appendText(div, 'Hello, World!');
console.log(getText(div)); // 'Hello, World!'

16. `getLength`

typescript

import { make, appendText, getLength } from 'snappykit';

const div = make('div');
appendText(div, 'Hello, World!');
console.log(getLength(div)); // 13

17. `mergeAdjacentTextNodes`

typescript

import { make, appendText, mergeAdjacentTextNodes } from 'snappykit';

const div = make('div');
appendText(div, 'Hello, ');
appendText(div, 'World!');
mergeAdjacentTextNodes(div); // Объединяет соседние текстовые узлы

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

18. `hasClass`

typescript

import { make, hasClass, addClass } from 'snappykit';

const button = make('button');
addClass(button, 'active');
console.log(hasClass(button, 'active')); // true

19. `addClass`

typescript

import { make, addClass } from 'snappykit';

const div = make('div');
addClass(div, 'container');
addClass(div, ['active', 'visible']); // Добавляет несколько классов
addClass(div, 'active visible'); // Также добавляет несколько классов

20. `removeClass`

typescript

import { make, addClass, removeClass } from 'snappykit';

const div = make('div');
addClass(div, ['container', 'active']);
removeClass(div, 'active'); // Удаляет один класс
removeClass(div, ['container', 'visible']); // Удаляет несколько классов
removeClass(div, 'container visible'); // Также удаляет несколько классов

21. `toggleClass`

typescript

import { make, toggleClass } from 'snappykit';

const button = make('button');
toggleClass(button, 'active'); // Добавляет класс, если его нет, или удаляет, если он есть
toggleClass(button, ['active', 'visible']);
toggleClass(button, 'active visible');

Работа со стилями

22. `css`

typescript

import { make, css } from 'snappykit';

const div = make('div', (el) => {
  css(el, { color: 'red', fontSize: '16px' }); // Установка стилей
});
css(div, 'border', '1px solid red'); // Или так
console.log(css(div, 'color')); // Получение стиля: 'red'

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

23. `attr`

typescript

import { make, attr } from 'snappykit';

const link = make('a');
attr(link, 'href', 'https://example.com'); // Установка атрибута
attr(link, {
  target: "_blank",
  rel: 'nofollow'
}); // Объект с атрибутами
console.log(attr(link, 'href')); // Получение атрибута: 'https://example.com'

24. `removeAttr`

typescript

import { make, attr, removeAttr } from 'snappykit';

const link = make('a');
attr(link, 'href', 'https://example.com');
removeAttr(link, 'href'); // Удаление атрибута
removeAttr(link, ['target', 'rel']);  // Массив с атрибутами

25. `data`

typescript

import { make, data } from 'snappykit';

const div = make('div');
data(div, 'info', 'example'); // Установка data-атрибута
data(div, {
  slide: 1,
  tag: 'div'
}); // Объект данных
console.log(data(div, 'info')); // Получение data-атрибута: 'example'

26. `dataByPrefix`

typescript

import { make, data, dataByPrefix } from 'snappykit';

const div = make('div');
data(div, 'user-name', 'Alice');
data(div, 'user-age', '25');
console.log(dataByPrefix(div, 'user')); // { userName: 'Alice', userAge: '25' }

Работа с значениями элементов

27. `val`

typescript

import { make, val } from 'snappykit';

const input = make<HTMLInputElement>('input');
val(input, 'Default Value'); // Установка значения
console.log(val(input)); // Получение значения: 'Default Value'

Поиск и навигация

28. `query`

typescript

import { query, make, append } from 'snappykit';

query('button', (el, index) => {
  console.log(`Found button at index ${index}:`, el);
});

const div = make('div', (el) => {
    const btn = make<HTMLButtonElement>('button');
    append(el, btn);
});

query<HTMLButtonElement>('button', (el, index) => {
  console.log(`Found button at index ${index}:`, el);
}, div);

29. `queryList`

typescript

import { queryList } from 'snappykit';

const buttons = queryList('button');
const buttonTyped = queryList<HTMLButtonElement>('button');
console.log(buttons.length); // Количество найденных кнопок

30. `queryLength`

typescript

import { queryLength } from 'snappykit';

const count = queryLength('div'); // Общее количество div в документе
console.log(`Found ${count} divs`);

31. `closest`

typescript

import { make, closest, append } from 'snappykit';

const child = make('div');
const parent = make('div', (el) => append(el, child));
console.log(closest(child, parent) === parent); // true

32. `getChildNodes`

typescript

import { make, append, getChildNodes } from 'snappykit';

const parent = make('div');
append(parent, make('p', (el) => el.textContent = 'Hello'));
console.log(getChildNodes(parent).length); // 1

Видимость

33. `show`

typescript

import { make, show, hide } from 'snappykit';

const div = make('div');
hide(div); // Скрывает элемент
show(div); // Показывает элемент

34. `hide`

typescript

import { make, hide } from 'snappykit';

const div = make('div');
hide(div); // Скрывает элемент

35. `toggle`

typescript

import { make, toggle } from 'snappykit';

const div = make('div');
toggle(div); // Переключает видимость

Размеры и позиция

36. `rect`

typescript

import { make, rect, append } from 'snappykit';

const div = make('div');
append(document.body, div);
console.log(rect(div)); // DOMRect { x: 0, y: 0, width: 0, height: 0, ... }

37. `offset`

typescript

import { make, offset, append } from 'snappykit';

const div = make('div');
append(document.body, div);
console.log(offset(div)); // { top: 0, left: 0 }

38. `position`

typescript

import { make, position, append } from 'snappykit';

const parent = make('div', (el) => {
  el.style.position = 'relative';
});
const child = make('div');
append(parent, child);
append(document.body, parent);
console.log(position(child)); // { top: 0, left: 0 }

39. `width`

typescript

import { make, width, append } from 'snappykit';

const div = make('div');
append(document.body, div);
console.log(width(div)); // 0 (ширина содержимого)
width(div, 100); // Устанавливает ширину
console.log(width(div)); // 100

40. `height`

typescript

import { make, height, append } from 'snappykit';

const div = make('div');
append(document.body, div);
console.log(height(div)); // 0 (высота содержимого)
height(div, 200); // Устанавливает высоту
console.log(height(div)); // 200

41. `innerWidth`

typescript

import { make, innerWidth, append } from 'snappykit';

const div = make('div');
append(document.body, div);
console.log(innerWidth(div)); // 0 (ширина содержимого + padding)
innerWidth(div, 150); // Устанавливает внутреннюю ширину
console.log(innerWidth(div)); // 150

42. `innerHeight`

typescript

import { make, innerHeight, append } from 'snappykit';

const div = make('div');
append(document.body, div);
console.log(innerHeight(div)); // 0 (высота содержимого + padding)
innerHeight(div, 250); // Устанавливает внутреннюю высоту
console.log(innerHeight(div)); // 250

43. `outerWidth`

typescript

import { make, outerWidth, append } from 'snappykit';

const div = make('div');
append(document.body, div);
console.log(outerWidth(div)); // 0 (ширина содержимого + padding + border)
console.log(outerWidth(div, true)); // 0 (включая margin)

44. `outerHeight`

typescript

import { make, outerHeight, append } from 'snappykit';

const div = make('div');
append(document.body, div);
console.log(outerHeight(div)); // 0 (высота содержимого + padding + border)
console.log(outerHeight(div, true)); // 0 (включая margin)

45. `outerSize`

typescript

import { make, outerSize, append } from 'snappykit';

const div = make('div');
append(document.body, div);
console.log(outerSize(div)); // { width: 0, height: 0 }

46. `scrollTop`

typescript

import { make, scrollTop, append } from 'snappykit';

const div = make('div', (el) => {
  el.style.height = '100px';
  el.style.overflow = 'auto';
});
const content = make('div', (el) => {
  el.style.height = '200px';
});
append(div, content);
append(document.body, div);
console.log(scrollTop(div)); // 0
scrollTop(div, 50); // Прокручивает на 50 пикселей вниз
console.log(scrollTop(div)); // 50

47. `scrollLeft`

typescript

import { make, scrollLeft, append } from 'snappykit';

const div = make('div', (el) => {
  el.style.width = '100px';
  el.style.overflow = 'auto';
  el.style.whiteSpace = 'nowrap';
});
const content = make('div', (el) => {
  el.style.width = '200px';
  el.style.display = 'inline-block';
});
append(div, content);
append(document.body, div);
console.log(scrollLeft(div)); // 0
scrollLeft(div, 30); // Прокручивает на 30 пикселей вправо
console.log(scrollLeft(div)); // 30

Типы

В методах выше используются следующие типы:

typescript

// Базовые типы для работы с DOM
type DomNode = Node | Element | HTMLElement;
type DomChildNode = Node | Node[] | NodeList;
type ValueElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
type ScrollableElement = HTMLElement | Window;

DOM Методы ​

Список методов ​

Создание и манипуляция элементами ​

Работа с дочерними элементами ​

Работа с HTML и текстом ​

Работа с классами ​

Работа со стилями ​

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

Чтение и запись значений ​

Поиск и навигация ​

Видимость ​

Размеры и позиция ​

Примеры использования ​

Создание и манипуляция элементами ​

1. make ​

2. makeText ​

3. remove ​

4. empty ​

Работа с дочерними элементами ​

5. append ​

6. prepend ​

7. before ​

8. after ​

9. replaceWithChildren ​

Работа с HTML и текстом ​

10. html ​

11. text ​

12. toHtml ​

13. appendText ​

14. toTextNode ​

15. getText ​

16. getLength ​

17. mergeAdjacentTextNodes ​

Работа с классами ​

18. hasClass ​

19. addClass ​

20. removeClass ​

21. toggleClass ​

Работа со стилями ​

22. css ​

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

23. attr ​

24. removeAttr ​

25. data ​

26. dataByPrefix ​

Работа с значениями элементов ​

27. val ​

Поиск и навигация ​

28. query ​

29. queryList ​

30. queryLength ​

31. closest ​

32. getChildNodes ​

Видимость ​

33. show ​

34. hide ​

35. toggle ​

Размеры и позиция ​

36. rect ​

37. offset ​

38. position ​

39. width ​

40. height ​

41. innerWidth ​

42. innerHeight ​

43. outerWidth ​

44. outerHeight ​

45. outerSize ​

46. scrollTop ​

47. scrollLeft ​

Типы ​

DOM Методы

Список методов

Создание и манипуляция элементами

Работа с дочерними элементами

Работа с HTML и текстом

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

Работа со стилями

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

Чтение и запись значений

Поиск и навигация

Видимость

Размеры и позиция

Примеры использования

Создание и манипуляция элементами

1. `make`

2. `makeText`

3. `remove`

4. `empty`

Работа с дочерними элементами

5. `append`

6. `prepend`

7. `before`

8. `after`

9. `replaceWithChildren`

Работа с HTML и текстом

10. `html`

11. `text`

12. `toHtml`

13. `appendText`

14. `toTextNode`

15. `getText`

16. `getLength`

17. `mergeAdjacentTextNodes`

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

18. `hasClass`

19. `addClass`

20. `removeClass`

21. `toggleClass`

Работа со стилями

22. `css`

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

23. `attr`

24. `removeAttr`

25. `data`

26. `dataByPrefix`

Работа с значениями элементов

27. `val`

Поиск и навигация

28. `query`

29. `queryList`

30. `queryLength`

31. `closest`

32. `getChildNodes`

Видимость

33. `show`

34. `hide`

35. `toggle`

Размеры и позиция

36. `rect`

37. `offset`

38. `position`

39. `width`

40. `height`

41. `innerWidth`

42. `innerHeight`

43. `outerWidth`

44. `outerHeight`

45. `outerSize`

46. `scrollTop`

47. `scrollLeft`

Типы