short-dom-util

As personal collection of short dom manipulation functions.

Syntax

All of these functions return the target to be then pass into another function. This allow us to write compossible code.

Creating elements

c(elm)//(c)reate

tc(target, val)//(t)ext(c)ontent

sa(target, attrib, val)//(s)et(a)ttribute, here attrib is a string

sma(target, attrib)//(s)et (m)ultiple (a)ttribute, here attrib is the attrib object with propertise name and value corresponding to it.

ap(target, ...objs)//(ap)pendChild

cea(elm, attrib)  //(c)reate element with (a)trribute, here attrib is an object with desired attributes values inside here's an example 
//{class: "nav-bar", id: "main-nav"}

Clearing child nodes

clc(target) //(Cl)ear (c)hild nodes

Querying

q(selector, parentNode=document) // parentNode.querySelector(selector)
qa(selector, parentNode=document) // parentNode.querySelectorAll(selector)

Example use case

Building an application in pure Javascript ? To create element, typing document dot something takes alot of time. Here's one way to create a form using the syntax above

function createFormElement() {
    const form = ap(cea('form', {action:"", method:"post" ,id:"create-todo-form"}),
        tc(c('h2'), 'todo creation'),
        ap(c('fieldset'),
            tc(c('legend'), 'todo info'),
            ap(c('p'),
                tc(cea('label',{for:"title"}), 'Title:'),
                cea('input', {type:"text", id:"title", name:"todo_title" ,required:''}),
                c('span')),
            ap(c('p'),
                tc(cea('label', {for:"description"}), 'Description:'),
                cea('input', {type:"text", id:"description", name:"todo_description", required: ''}),
                c('span')),
            ap(c('p'),
                tc(cea('label', {for:"content"}), 'Content:'),
                cea('textarea', {rows:"5" ,id:"content", maxlength:"1000", required: ''})),
            ap(c('p'),
                tc(cea('label',{for:"due-date"}), 'Due date:'),
                cea('input',{type:"date" ,id:"due-date", name:"todo_dueDate", required: ''})),
            ap(c('p'), 
                tc(cea('label', {for:"priority"}), 'Priority:'),
                ap(cea('select', {id:"priority"}),
                    tc(cea('option', {value:"normal"}),'Normal'),
                    tc(cea('option', {value:"moderate"}), 'Moderate'),
                    tc(cea('option', {value:"urgent"}), 'Urgent'))),
            ap(c('p'),
                tc(cea('label', {for:"tags"}), 'Tags'),
                tc(c('p'), 'These are space separated, and have syntax of indentifier:topic, example: rockband:guitar, programming:haskell, study:math:'),
                cea('input', {type:"text" ,id:"tags", name:"todo_tags"})),
            ap(c('p'),
                tc(c('p'), 'Status:'),
                tc(cea('label',{for:"finished"}), 'Finished'),
                cea('input', {type:"radio", id:"finished", value:"finished", name:"todo_status"}),
                tc(cea('label',{for:"unfinised"}), 'Unfinished'),
                cea('input', {type:"radio", id:"unfinished", value:"unfinished", name:"todo_status", checked: ''})),
            ap(c('p'),
                tc(cea('button', {type:"button", id:"create-todo-btn"}), 'Add todo'))
        )
    );
    sa(q('#due-date', form), 'min', new Date().toISOString().split("T")[0]);

    return form;
}