blaisethomas/jdom

full documentation:

JDOM.js

lightweight dom builder

---

installation

npm install jdom

usage

intended usage with webpack or browserify

const {
   createElement, updateElement,
   DIV, SPAN, SCRIPT, STYLE, // ...etc
   $, $$,
   on, once, off, dispatch,
   currentScript,
   style,
   isObject, isArray, isElement
} from 'jdom';

---

createElement (string tag, object props, string ns);

create dom/svg elements

example

 const container = createElement('div', {
     id: 'a',
     style: {
         color: 'red'
     },
     click: () => {
         this.style.color = 'blue';
     }
 })

---

updateElement (HTMLElement elem, object props);

update dom elements

example

 const element = document.getElementById('asdf');
 const container = updateElement(element, {
     style: {
         color: 'blue'
     }
 })

---

DOM FACTORY METHODS

syntastic sugar

example

import {DIV, SCRIPT, SPAN} from 'jdom';

 const div = DIV({
     id: 'myDiv',
     children: [
         'injecting script',
         SCRIPT({src: 'http://some.url'}),
         'done'
     ],
     parent: document.body
 });

 SPAN({parent: div, children: ['!!!!']);

---

SVG FACTORY METHODS

syntastic sugar

example

import {SVG, RECT, CIRCLE} from 'jdom';

 SVG({
     id: 'mySVG',
     width: 200,
     height: 200,
     viewBox: '0 0 200 200',
     children: [
         RECT({
             fill : 'red',
             x:5,
             y:5,
             width: 190,
             height: 190
         }),
         CIRCLE({
             fill: 'yellow',
             cx: 100,
             cy:100,
             r:80
         })
     ],
     parent: document.body
 });

---

aliases

example

const b = $('#b');
const c = $$('.c');

---

event management

• on (HTMLElement elem, string event, function handler)
• once (HTMLElement elem, string event, function handler)
• off (HTMLElement elem, string event, function handler)
• dispatch (HTMLElement elem, string event);

example

 const someDiv = document.getElementById('someDiv');
 on(someDiv, 'mouseover', () => {
     someDiv.style.backgroundColor = 'red';
 });
 once(someDiv, 'click', () => {
     someDiv.parentNode.removeChild(someDiv);
 });
 off(someDiv, 'click', someFunction);
 dispatch(someDiv, 'click');

---

currentScript ()

get the currently executing script

example

const thisScript = currentScript();
console.log(thisScript.src);

---

style (HTMLElement elem, object props)

update element style

example

 const someDiv = document.getElementById('someDiv');
 style(someDiv, {
     color: 'green',
     backgroundColor: 'red'
 })

---

utilities

• isObject (object obj)
• isArray (object obj)
• isElement (object obj)
• toCamelCase (string str)

---