A lightweight DOM & Event manipulation.
-
CDN
-
Also supports ES6 Module, CommonJS, AMD and UMD style.
import {create, add} from 'realdom';
let div = create('DIV');
div.addClass('panel');
let span = add('SPAN', div);
span.html('Hello world');
// ...
Here are several examples:
- Material Design - Ripple effect
- Material Design - Floating input label
- Material Design - Animation effect - Grid render
- Test CSS 3D transform
import {
ready,
create,
add,
get,
query,
queryAll
} from 'realdom';
let rows = queryAll('table tr');
rows.forEach((row) => {
row.style.backgroundColor = 'red';
});
- .query(String selectors)
- .queryAll(String selectors)
- .get(String ID)
- .add(Element|String tag [, Element parent])
- .create(Element dom)
- .ready(Function callback)
Returned elements have several helpful methods as below:
- .class(String|Object name, Boolean state)
- .hasClass(String className)
- .addClass(String className)
- .removeClass(String className)
- .toggleClass(String className)
- .replaceClass(String classNameOld, String classNameNew)
- .attr(Object|String attr, String val)
- .setAttr(String name, String val),
- .getAttr(String name),
- .removeAttr(String name),
- .toggleAttr(String name, Boolean state),
- .css(Object|String style, String val)
- .query(String selectors)
- .queryAll(String selectors)
- .html([String html])
- .empty()
- .destroy()
import { Event } from 'realdom';
- .Event.on(String|Element s, String eventName, Function callback(event, target))
- .Event.once(String|Element s, String eventName, Function callback(event, target))
- .Event.emit(String|Element s, String eventName)
- .Event.stop(Event e)
Examples:
import {
ready,
add,
all,
Event
} from 'realdom';
ready(() => {
// Add a new element to document.body
let container = add('DIV');
// then add a DIV element into container
let div1 = add('DIV', container);
// then add a class "sub-item" to child DIV
div1.addClass('sub-item');
// more a child DIV
let div2 = add('DIV', container);
// also add a class "sub-item"
div2.addClass('sub-item');
// or try the shorthand
div2.class('sub-item');
// .class(name, state=) if the second param is not there the class
// will be toggled
// now, we can extract list of elements by class name:
let subItems = all('.sub-item');
console.log(subItems);
// create a button
let btn = add('INPUT');
// add some attributes
btn.attr({
type: 'button',
id: 'btnLogin',
value: 'Login'
});
// specify css style
btn.css({
color: 'red',
fontSize: 15,
backgroundColor: '#ff6',
maxWidth: 500,
paddingTop: '2px'
});
// set an event listener
Event.on(btn, 'click', () => {
alert('Hello! How it\'s going?');
});
// or
btn.on('click', (evt, el) => el.html('Howdy!'));
// simulate a click event on there (it works as same as jQuery.trigger method)
Event.emit(btn, new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': true
}));
// or
btn.emit('custom-event');
});
git clone https://github.com/ndaidong/realdom.git
cd realdom
npm install
npm test
The MIT License (MIT)