Neighbor's Preppy Maltese
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

realdom

3.2.4 • Public • Published

realdom

A lightweight DOM & Event manipulation.

npm version Build Status codecov Dependency Status NSP Status

Setup

Usage

import {create, add} from 'realdom';

let div = create('DIV');
div.addClass('panel');

let span = add('SPAN', div);
span.html('Hello world');
// ...

How does it work?

Here are several examples:

APIs

DOM

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:

  • .hasClass(String className)
  • .addClass(String className)
  • .removeClass(String className)
  • .toggleClass(String className)
  • .replaceClass(String classNameOld, String classNameNew)
  • .setProperty(Object atts)
  • .setStyle(Object style)
  • .query(String selectors)
  • .queryAll(String selectors)
  • .html([String html])
  • .empty()
  • .destroy()

Event

import { Event } from 'realdom';
  • .Event.on(String|Element s, String eventName, Function callback)
  • .Event.off(String|Element s, String eventName, Function callback)
  • .Event.simulate(String|Element s, String eventName)
  • .Event.stop(Event e)
  • .Event.locate(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');

  // 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.setProperty({
    type: 'button',
    id: 'btnLogin',
    value: 'Login'
  });

  // specify css style
  btn.setStyle({
    color: 'red',
    fontSize: 15,
    backgroundColor: '#ff6',
    maxWidth: 500,
    'padding-top': '2px'
  });

  // set an event listener
  Event.on(btn, 'click', () => {
    alert('Hello! How it\'s going?');
  });

  // simulate a click event on there (it works as same as jQuery.trigger method)
  Event.simulate(btn, 'click');

});

Test

git clone https://github.com/ndaidong/realdom.git
cd realdom
npm install
npm test

License

The MIT License (MIT)

install

npm i realdom

Downloadsweekly downloads

0

version

3.2.4

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability