Tejas

A Tiny DOM Manipulation Library.

Usage

Querying elements

import { qs, qsa } from './tejas.js';
const elem = qs("#test"); // document.querySelector
const elems = qsa("div"); // document.querySelectorAll

Creating elements

import { el, svg } from './tejas.js';
const btn = el('button'); // Output: <button></button>
const foo = el('.class1.class2#foo'); // Output: <div id="foo" class="class1 class2"></div>
const svgEl = svg('svg'); // for creating SVG elements
const path = svg('path');

Note: When you have to append an element to the DOM that’s going to contain several other child elements,
you should first append its child nodes to a DocumentFragment and append the childnodes
to it first and then to the parent element.

Example:

import { el, frag } from './tejas.js';
const createItem = task => {
  const item = el('li.item');
  item.textContent = task;
  return item;
};
const createList = tasks => {
  const list = el('ul.list');
  const items = tasks.map(createItem);
  const fragment = frag();
  fragment.append(...items);
  list.appendChild(fragment);
  return list;
};
document.body.appendChild(createList(['Buy Milk', 'Buy Tea', 'Water Plants']));

Handling events

import { on, off, ready } from './tejas.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.
});

Attributes and CSS styling

import { setStyle, attr } from './tejas.js';
setStyle(elem, { color: "red", background: "blue" }); // adding multiple styles to an element
console.log(attr(elem, "id")); // getAttribute
attr(elem, "id", "test"); // setAttribute
attr(elem, "disabled", false); // removeAttribute

Made With ♥ in Bharat