meijs v1.0.3

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);