Simplify DOM Manipulation With Edom.js

Edom.js is a tiny yet robust JavaScript library that provides a set of useful functions to interact with DOM.

With Edom.js, you can easily create, write, append, insert, and multiply elements. It also allows you to add, remove, and toggle attributes, CSS classes, and events. Additionally, you can apply animations, get AJAX content, serialize form data, and more.

How to use it:

1. Install Edom.js with NPM.

# NPM
$ npm install edomjs

2. Import Edom.js into your project.

import edom from 'edomjs';

<!-- OR -->
<script type="module">
import edom from 'https://cdn.jsdelivr.net/npm/edomjs@latest';
</script>

3. Here’s a simple example of inserting an h1 title ‘CSSScript.Com’ into your document:

const h1 = edom.create('h1');
edom.write(h1)('Hello, world!');
edom.append(h1)(document.body);

4. Full functions:

// Create new html element(s)
edom.create(string | Array<string>);
// Select an element from html
edom.select(String);
// Select all elements having the specified query selector
edom.selectAll(String);
// Apply the attributes specified in params, as an Object, to a HTMLElement
edom.addAttr(HTMLElement)(attrsObj);
// Add CSS to an element
edom.addCSS(HTMLElement)(style);
// Get style of an element.
// Note that it only return the style set from javascript and not the computed style.
edom.getCSS(HTMLElement)(cssProp);
// Get computed style of an HTMLElement
edom.getComputedCSS(HTMLElement)(cssProp);
// Add/remove/toggle CSS class
edom.addClass(HTMLElement)(classNames);
edom.removeClass(HTMLElement)(classNames);
edom.toggleClass(HTMLElement)(className);
// Verify if an element contain a class.
edom.containsClass(HTMLElement)(className);
// Set inner text of HTMLElement(s).
edom.write(HTMLElement)(text);
// Set/add html code
edom.setHTML(HTMLElement)(HTMLCode);
edom.addHTML(HTMLElement)(HTMLCode);
// Append a HTMLElement in an HTMLElement as child.
edom.append(HTMLElement)(parent);
// Rotate an element.
edom.rotate(HTMLElement)(degrees);
// Dynamic script loading
edom.loadScript(src);
// Add/remove event listener
edom.addEvent(HTMLElement)(event)(handler);
edom.removeEvent(HTMLElement)(event)(handler);
// Insert an element before/after another element
edom.insertBefore(HTMLElement)(newElement);
edom.insertAfter(HTMLElement)(newElement);
// Apply CSS animation to an element
edom.applyAnimation(HTMLElement)(animObject);
// Perform an AJAX GET request
edom.ajaxGet(url)(callback);
// Perform a Fetch GET request
edom.fetchGet(url);
// Serialize form data
edom.serializeForm(HTMLFormElement);
// Multiply an element by creating the specified number of copies and inserting them after the element.
edom.multiply(HTMLElement)(number);

Changelog:

09/17/2024

• JS update

08/25/2024

• make edom.js cross compatible with browser and module