https://github.com/itsawa/dom-keeper
A lightweight library for efficient DOM element manipulation.
https://github.com/itsawa/dom-keeper
dom dom-manipulation helper javascript js library simplification site
Last synced: 3 months ago
JSON representation
A lightweight library for efficient DOM element manipulation.
- Host: GitHub
- URL: https://github.com/itsawa/dom-keeper
- Owner: ITSawa
- License: mit
- Created: 2024-12-01T18:50:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-01T18:55:19.000Z (over 1 year ago)
- Last Synced: 2025-11-12T13:28:47.877Z (7 months ago)
- Topics: dom, dom-manipulation, helper, javascript, js, library, simplification, site
- Language: JavaScript
- Homepage:
- Size: 7.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# DOM Keeper
**DOM Keeper** is a library for convenient manipulation of HTML elements in JavaScript. It provides functions for creating elements, adding and removing classes, working with attributes and styles, and managing element data.
## Installation
```bash
npm install dom-keeper
Main Functions
1. createElement(parent, options)
Creates an HTML element and appends it to the parent element.
Parameters:
parent: The parent element (HTMLElement).
options: An object containing options for the new element.
Example:
javascript
createElement(document.body, {
htmlElement: 'div',
classString: 'my-class',
index: 1,
dataSourcesString: 'source:abc',
});
2. checkHtmlElement(htmlElement)
Checks if the passed element is a valid HTML element.
Example:
javascript
checkHtmlElement('div'); // Returns 'div'
checkHtmlElement('invalid'); // Throws an error
3. bindTextToElement(element, variableName, variable)
Binds a text value to an element, updating it when the variable changes.
Example:
javascript
const reactiveVar = bindTextToElement(element, 'name', 'John');
reactiveVar.name = 'Mike'; // The element updates automatically
4. setStyle(element, property, value)
Sets a style for an element.
Example:
javascript
setStyle(element, 'color', 'red');
5. toggleClass(element, className)
Toggles a class on an element.
Example:
javascript
toggleClass(element, 'active');
Usage Example
javascript
import { createElement, setStyle, toggleClass } from 'dom-keeper';
// Create an element and append it to body
const div = createElement(document.body, {
htmlElement: 'div',
classString: 'my-class',
index: 1,
dataSourcesString: 'source:abc',
});
// Set style
setStyle(div, 'background-color', 'blue');
// Toggle class
toggleClass(div, 'highlight');
Important Notes
All library functions work only with valid HTML elements.
Using checkHtmlElement helps avoid errors when creating elements.
License
MIT
```