KRIT-JS

Tiny Toolkit For DOM Manipulation

It simplifies simple tasks like

querying elements

  import { qs, qsa } from './tez.js';
  
  const el = qs("#test"); // document.querySelector
  
  const els = qsa("div"); // document.querySelectorAll

handling events

  import { on, off, ready } from './tez.js';
  
  const greet = () => console.log("hello world");
  
  on(button, "click", greet); // addEventListener
  
  off(button, "click", greet); // removeEventListener
  
  ready(() => {
  
    // your code which you want to run after the dom has loaded
  
  });

and

   import { style, attr } from './tez.js';
   
   style(el, { color: "red", background: "blue" }); // adding multiple styles to an element
   
   console.log(attr(el, "id")); // getAttribute
   
   attr(el, "id", "test"); // setAttribute

Other cool stuff

  const todoList = h('div', { id: 'container' }, 
  
    h('h1', null, 'ToDos: ', 
    
      h('ul', { id: 'todoList' },
      
        h('li', null, 'task 1'),

        h('li', null, 'task 2')
      
      )
    
    )
  
  ); // create DOM Elements

  append(document.body, todoList); // append element to document.body ( you can append multiple elements )