Virtual DOM Base

Virtual DOM Base is a basic implementation of DOM manipulation lib.

Intro

With Element and RenderDOM offered by Virtual DOM Base, you can easily manipulate your DOM structure.

Usage

jsx syntax is supported in this lib, and you can also use Element.createElement to create virtual DOM and render it to real DOM.

Basic Usage

import { Element } from 'virtual-dom-base';

const root = Element.createElement('div', {
  id: 'root',
  Element.createElement('h1', null, 'Hello Virtual DOM Base!'),
  Element.createElement('blockquote', null,
  	Element.createElement('code', null, 'Virtual DOM Base'),
    ' is a basic implementation of DOM manipulation lib.'
  ),
});

With JSX

import { Element } from 'virtual-dom-base';

const root = (
  <div id="root">
    <h1>Hello Virtual DOM Base!</h1>
    <blockquote>
      <code>Virtual DOM Base</code> is a basic implementation of DOM manipulation lib.
    </blockquote>
  </div>
);

Types of Params

Type	Result
Element instance	Element(HTMLElement)
String	TextNode
Number	TextNode
Undefined	Comment(<!-- empty node -->)
Null	Comment(<!-- empty node -->)
Object	Comment(<!-- unknown node -->)
Array	DocumentFragment
Default	Comment(<!-- unknown node -->)

example

import { Element } from 'virtual-dom-base';

const root = (
  <div>
    <h1>Headline</h1>
    text
    7873632
    {undefined}
    {null}
    {{ name: 'virtual dom base' }}
    {[
      <div className="child">Amy</div>,
      <div className="child">Bob</div>,
      Math.random > 0.5 ? 'Cindy' : 'Dick',
      false
    ]}
    <div>Content</div>
  </div>
);

output