JDOM.js
Installation
npm install --save jdom
Import
import {
domFactory, svgFactory,
on, once, off, dispatch,
style
} from 'jdom';
Compose DOM Example
example:
const {DIV, SCRIPT, SPAN} = domFactory;
const myDiv = DIV({
parent: document.body
id: 'myDiv',
style: {
color: 'red'
},
dataset: {
foo: 'bar'
},
children: [
'injecting script',
SCRIPT({src: 'http://some.url'}),
'done'
],
click: () => {
alert('now');
}
});
SPAN({parent: myDiv, children: ['SomeText!!!!']);
Compose SVG Example
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
});
style (HTMLElement elem, object props)
update element style
example:
const a = document.getElementById('aDiv');
style(a, {
color: 'green',
backgroundColor: 'red'
})
QueryList($) (string/element/nodelist/array/function selector)
example:
const $a = $('#aDiv');
$a.on('click', () => {
if ($a.hasClass('foo')) {
$a.removeClass('foo').addClass('bar');
} else {
$a.removeClass('bar').addClass('foo');
}
});
$a.dispatch('click');
Querylist Event Methods
- on
- once
- off
- dispatch
Querylist Style Methods
- style
- hasClass
- addClass
- removeClass
Querylist Array Prototype Methods
- filter
- forEach
- map
- pop
- push
- shift
- slice
- some
- splice
- unshift