DOM Methods

Methods for manipulating, traversing, creating, and managing styles of DOM elements.

Method List

Element Creation and Manipulation

Method	Signature	Description
make	<T extends HTMLElement = HTMLElement>(name: string, callback?: (el: T) => void): T	Creates a new HTML element.
makeText	(content: string): Text	Creates a new text node.
remove	(element: Element | Element[] | NodeListOf<Element>): void	Removes an element from its parent in the DOM.
empty	<T extends HTMLElement = HTMLElement>(el: T): T	Removes all child nodes from an element.

---

Child Element Operations

Method	Signature	Description
append	<T extends DomNode = DomNode>(el: T, child: DomChildNode): T	Adds a child node to the end of the parent element.
prepend	<T extends DomNode = DomNode>(el: T, child: DomChildNode): T	Adds a child node to the beginning of the parent element.
before	<T extends Element>(el: T, child?: DomChildNode): T | Element | null	Inserts a node before the specified element or returns the previous sibling element.
after	<T extends Element>(el: T, child?: DomChildNode): T | Element | null	Inserts a node after the specified element or returns the next sibling element.
replaceWithChildren	(element: HTMLElement): void	Replaces an element with its child nodes.

---

HTML and Text Operations

Method	Signature	Description
html	(el: HTMLElement, value?: string | null): string; (el: HTMLElement, value: string): HTMLElement	Gets or sets the innerHTML of an element.
text	<T extends DomNode = DomNode>(el: T): string; (el: T, value: string): T	Gets or sets the text content of an element.
toHtml	(data: string | Node | Node[] | HTMLElement | HTMLElement[]): string	Converts a node, element, or string to an HTML string.
appendText	(el: DomNode, text: string): DomNode	Adds a text node to an element.
toTextNode	(text: string): Node	Creates a text node from a string.
getText	(node: Node | Node[]): string	Returns the combined textContent of a node or array of nodes.
getLength	(node: Node | Node[]): number	Returns the total length of text in a node or array of nodes.
mergeAdjacentTextNodes	(element: HTMLElement): void	Merges adjacent text nodes into one.

---

Class Operations

Method	Signature	Description
hasClass	(element: HTMLElement | null, className: string): boolean	Checks if an element has the specified CSS class.
addClass	(el: HTMLElement, className: string | string[]): void	Adds one or more CSS classes to an element.
removeClass	(el: HTMLElement, className: string | string[]): void	Removes one or more CSS classes from an element.
toggleClass	(el: HTMLElement, className: string | string[]): void	Toggles one or more CSS classes on an element.

---

Style Operations

Method	Signature	Description
css	(element: HTMLElement, prop: string | Record<string, string | number | null>, value?: string | number | null): string	Gets or sets CSS styles.

---

Attribute Operations

Method	Signature	Description
attr	(el: Element | HTMLElement, key: string | Record<string, string>, value?: string): string | undefined | void	Gets or sets an attribute of an element.
removeAttr	(el: Element | HTMLElement, attrName: string | string[]): void	Removes an attribute or array of attributes from an element.
data	(el: HTMLElement, key: string | Record<string, string>, value?: string): string | undefined | void	Gets or sets a data-* attribute of an element.
dataByPrefix	(element: HTMLElement, prefix: string): Record<string, string | number>	Gets all data-* attributes starting with the specified prefix.

---

Value Operations

Method	Signature	Description
val	(el: ValueElement): string; (el: ValueElement, value: string): ValueElement	Gets or sets the value of a form element.

---

Search and Navigation

Method	Signature	Description
query	<T extends Element = Element>(selector: string, callback: (el: T, index: number) => void, context: Element | Document = document): number	Searches for elements by CSS selector and executes a callback for each.
queryList	<T extends Element = Element>(selector: string, context: Element | Document = document): T[]	Returns an array of all elements matching the CSS selector.
queryLength	(selector: string, context: Element | Document = document): number	Returns the number of elements matching the CSS selector.
closest	<C extends Node = HTMLElement, P extends Node = HTMLElement>(child: C | EventTarget | null, parent: P | EventTarget | null): P | false	Returns the parent element if found in the hierarchy.
getChildNodes	(element: Node): Node[]	Returns an array of all child nodes of an element.

---

Visibility

Method	Signature	Description
show	(el: HTMLElement): void	Shows a previously hidden element.
hide	(el: HTMLElement): void	Hides an element.
toggle	(el: HTMLElement): void	Toggles the visibility of an element.

---

Size and Position

Method	Signature	Description
rect	(el: HTMLElement): DOMRect	Returns a DOMRect object with the coordinates and dimensions of the element.
offset	(el: HTMLElement): { top: number; left: number }	Returns the position of an element relative to the document.
position	(el: HTMLElement): { top: number; left: number }	Returns the position of an element relative to its offsetParent.
width	<T extends HTMLElement = HTMLElement>(el: T): number; (el: T, value: number | string): T	Gets or sets the content width of an element (excluding padding, border, and margin).
height	<T extends HTMLElement = HTMLElement>(el: T): number; (el: T, value: number | string): T	Gets or sets the content height of an element (excluding padding, border, and margin).
innerWidth	<T extends HTMLElement = HTMLElement>(el: T): number; (el: T, value: number | string): T	Gets or sets the inner width of an element (content + padding).
innerHeight	<T extends HTMLElement = HTMLElement>(el: T): number; (el: T, value: number | string): T	Gets or sets the inner height of an element (content + padding).
outerWidth	<T extends HTMLElement = HTMLElement>(el: T, includeMargin?: boolean): number	Gets the outer width of an element (content + padding + border + margin if specified).
outerHeight	<T extends HTMLElement = HTMLElement>(el: T, includeMargin?: boolean): number	Gets the outer height of an element (content + padding + border + margin if specified).
outerSize	<T extends HTMLElement = HTMLElement>(el: T): { width: number; height: number }	Returns the outer dimensions of an element, including margins.
scrollTop	<T extends ScrollableElement = ScrollableElement>(el: T): number; (el: T, value: number): T	Gets or sets the vertical scroll position.
scrollLeft	<T extends ScrollableElement = ScrollableElement>(el: T): number; (el: T, value: number): T	Gets or sets the horizontal scroll position.

Usage Examples

Element Creation and Manipulation

1. make

import { make } from 'snappykit';

const div = make('div');

// With a callback argument
const divWithCallback = make('div', (el) => {
  el.textContent = 'Hello, World!';
});

// With type usage
const input = make<HTMLInputElement>('input', (el) => {
  el.value = 'Hello';
});

---

2. makeText

import { makeText, append } from 'snappykit';

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

---

3. remove

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

const div = make('div');
append(document.body, div);
remove(div); // Removes the element from the DOM
remove([div, ...]); // or an array of elements

---

4. empty

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

const div = make('div');
append(div, make('p', (el) => el.textContent = 'Hello'));
empty(div); // Removes all child nodes

---

Child Element Operations

5. append

import { make, append } from 'snappykit';

const parent = make('div');
const child = make('p', (el) => el.textContent = 'Hello');
append(parent, child);
append(parent, [child, ...]); // or an array of elements

---

6. prepend

import { make, prepend } from 'snappykit';

const parent = make('div');
const child = make('p', (el) => el.textContent = 'Hello');
prepend(parent, child);
prepend(parent, [child, ...]); // or an array of elements

---

7. before

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, ...]); // or an array of elements

// Getting the previous sibling
const prevSibling = before(reference);
console.log(prevSibling); // null or previous element

---

8. after

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, ...]); // or an array of elements

// Getting the next sibling
const nextSibling = after(reference);
console.log(nextSibling); // null or next element

---

9. replaceWithChildren

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); // Replaces the parent element with its child nodes

---

HTML and Text Operations

10. html

import { make, html } from 'snappykit';

const div = make('div');
html(div, '<p>Hello, World!</p>'); // Setting HTML
console.log(html(div)); // Getting HTML: '<p>Hello, World!</p>'

---

11. text

import { make, text } from 'snappykit';

const div = make('div');
text(div, 'Hello, World!'); // Setting text
console.log(text(div)); // Getting text: 'Hello, World!'

---

12. toHtml

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

import { make, appendText } from 'snappykit';

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

---

14. toTextNode

import { toTextNode, append } from 'snappykit';

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

---

15. getText

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

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

---

16. getLength

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

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

---

17. mergeAdjacentTextNodes

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

const div = make('div');
appendText(div, 'Hello, ');
appendText(div, 'World!');
mergeAdjacentTextNodes(div); // Merges adjacent text nodes

---

Class Operations

18. hasClass

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

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

---

19. addClass

import { make, addClass } from 'snappykit';

const div = make('div');
addClass(div, 'container');
addClass(div, ['active', 'visible']); // Adds multiple classes
addClass(div, 'active visible'); // Also adds multiple classes

---

20. removeClass

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

const div = make('div');
addClass(div, ['container', 'active']);
removeClass(div, 'active'); // Removes one class
removeClass(div, ['container', 'visible']); // Removes multiple classes
removeClass(div, 'container visible'); // Also removes multiple classes

---

21. toggleClass

import { make, toggleClass } from 'snappykit';

const button = make('button');
toggleClass(button, 'active'); // Adds the class if it doesn't exist, or removes it if it does
toggleClass(button, ['active', 'visible']);
toggleClass(button, 'active visible');

---

Style Operations

22. css

import { make, css } from 'snappykit';

const div = make('div', (el) => {
  css(el, { color: 'red', fontSize: '16px' }); // Setting styles
});
css(div, 'border', '1px solid red'); // Or this way
console.log(css(div, 'color')); // Getting style: 'red'

---

Attribute Operations

23. attr

import { make, attr } from 'snappykit';

const link = make('a');
attr(link, 'href', 'https://example.com'); // Setting an attribute
attr(link, {
  target: "_blank",
  rel: 'nofollow'
}); // Object with attributes
console.log(attr(link, 'href')); // Getting an attribute: 'https://example.com'

---

24. removeAttr

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

const link = make('a');
attr(link, 'href', 'https://example.com');
removeAttr(link, 'href'); // Removing an attribute
removeAttr(link, ['target', 'rel']);  // Array of attributes

---

25. data

import { make, data } from 'snappykit';

const div = make('div');
data(div, 'info', 'example'); // Setting a data attribute
data(div, {
  slide: 1,
  tag: 'div'
}); // Data object
console.log(data(div, 'info')); // Getting a data attribute: 'example'

---

26. dataByPrefix

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' }

---

Value Operations

27. val

import { make, val } from 'snappykit';

const input = make<HTMLInputElement>('input');
val(input, 'Default Value'); // Setting a value
console.log(val(input)); // Getting a value: 'Default Value'

---

Search and Navigation

28. query

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

import { queryList } from 'snappykit';

const buttons = queryList('button');
const buttonTyped = queryList<HTMLButtonElement>('button');
console.log(buttons.length); // Number of buttons found

---

30. queryLength

import { queryLength } from 'snappykit';

const count = queryLength('div'); // Total number of divs in the document
console.log(`Found ${count} divs`);

---

31. closest

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

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

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

---

Visibility

33. show

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

const div = make('div');
hide(div); // Hides the element
show(div); // Shows the element

---

34. hide

import { make, hide } from 'snappykit';

const div = make('div');
hide(div); // Hides the element

---

35. toggle

import { make, toggle } from 'snappykit';

const div = make('div');
toggle(div); // Toggles visibility

---

Size and Position

36. rect

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

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

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

---

38. position

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

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

const div = make('div');
append(document.body, div);
console.log(width(div)); // 0 (content width)
width(div, 100); // Sets width
console.log(width(div)); // 100

---

40. height

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

const div = make('div');
append(document.body, div);
console.log(height(div)); // 0 (content height)
height(div, 200); // Sets height
console.log(height(div)); // 200

---

41. innerWidth

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

const div = make('div');
append(document.body, div);
console.log(innerWidth(div)); // 0 (content + padding width)
innerWidth(div, 150); // Sets inner width
console.log(innerWidth(div)); // 150

---

42. innerHeight

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

const div = make('div');
append(document.body, div);
console.log(innerHeight(div)); // 0 (content + padding height)
innerHeight(div, 250); // Sets inner height
console.log(innerHeight(div)); // 250

---

43. outerWidth

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

const div = make('div');
append(document.body, div);
console.log(outerWidth(div)); // 0 (content + padding + border width)
console.log(outerWidth(div, true)); // 0 (including margin)

---

44. outerHeight

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

const div = make('div');
append(document.body, div);
console.log(outerHeight(div)); // 0 (content + padding + border height)
console.log(outerHeight(div, true)); // 0 (including margin)

---

45. outerSize

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

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

---

46. scrollTop

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); // Scrolls 50 pixels down
console.log(scrollTop(div)); // 50

---

47. scrollLeft

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); // Scrolls 30 pixels to the right
console.log(scrollLeft(div)); // 30

Types

The following types are used in the methods above:

// Basic types for working with DOM
type DomNode = Node | Element | HTMLElement;
type DomChildNode = Node | Node[] | NodeList;
type ValueElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
type ScrollableElement = HTMLElement | Window;