Mei.js
a minimal, simple and helpful library for you
⭐ Star the project
With your star in the project, you help us to make ourselves known and the project to continue. Thank you very much!
Documentation
You can also find the documentation on the website.
DOM Manipulation:
Get Elements:
<h1 id="title">Mei.Js</h1>
<ul id="list-container">
<li class="item">Item-1</li>
<li class="item">Item-2</li>
<li class="item">Item-3</li>
</ul> // Return, if exist, the element, if not return null
let element = Mei.getElement('#title');
// Return an array of all selected elements
let elements = Mei.getElements('.item'); Events:
Set Events:
<h1 id="title">Mei.Js</h1>
<ul id="list-container">
<li class="item">Item-1</li>
<li class="item">Item-2</li>
<li class="item">Item-3</li>
</ul> // Event for the h1
Mei.getElement('#title', 'click', () => {
console.log('#title clicked!');
});
// This is not so recommended, use event delegation instead.
Mei.getElements('.item', 'click', () => {
console.log('item clicked!');
});Elements:
Creation:
<div id="container">
</div>
<ul id="list">
</ul> // This will create a 'h1'
Mei.createElement('h1', {
textContent: 'Hello World!',
className: 'title',
id: 'title-js',
parent: Mei.getElement('#container')
});
// Create Children's
Mei.createElement('li', {
textContent: 'Item',
className: 'item',
parent: Mei.getElement('#list'),
children: [
{element: 'a', textContent: ' x', href: '#'}
]
});Removing:
<h1 id="title">Title</h1> // This will remove the 'h1'
Mei.removeElement(Mei.getElement('#title'));Cloning:
<h1 id="title">Title 1</h1> // Cloning the 'h1'
let copiedH1 = Mei.cloneElement(Mei.getElement('#title'));
// output
console.log(copiedH1);Storage: Work with the API storage in a more easy way
Save data:
let users = [{name: 'John'}, {name: 'Nick'}];
// This will create a 'users' item/collection in a localStorage way.
Mei.store({
store: 'local',
item: 'users',
data: users
});
// This will create a 'users' item/collection in a sessionStorage way.
Mei.store({
store: 'session',
item: 'users',
data: users
});Clear all the stored data:
// This will delete all the localStorage data
Mei.clearStore('local');
// This will delete all the sessionStorage data
Mei.clearStore('session');Remove a specified item from the store:
// This will delete only the 'users' item (if exist) from localStorage
Mei.removeItemStore('local', 'users');
// This will delete only the 'users' item (if exist) from sessionStorage
Mei.removeItemStore('session', 'users');Get all the records, if is empty returns a empty array:
// This will display the 'users' item (if exist) from localStorage
let allUsersFromLocal = Mei.displayStore('local', 'users');
console.log(allUsersFromLocal);
// This will display the 'users' item (if exist) from sessionStorage
let allUsersFromSession = Mei.displayStore('session', 'users');
console.log(allUsersFromSession);