dom

heya-dom is used on browser to simplify DOM-related tasks, especially construction, and modification of DOM.

Following modules are provided:

• create — largely based on venerable Dojo. Includes creating DOM nodes with optional namespaces, setting attributes, properties, styles, and similar helpers.
• build — a Virtual DOM-inspired utility to create DOM fragments in one go using a simple array-based structure.
• hyperscript — an alternative for build, a minimalistic implementation of Dominic Tarr's hyperscript. It is there mostly to reuse existing tooling, and existing code created for other implementations.
• fromHtml — a helper to instantiate HTML snippets as DocumentFragment.

Examples

We want to create the following simple list:

<ul data-sort="asc">
  <li>one</li>
  <li class="x">two</li>
  <li>three</li>
</ul>

Let's do it with create() (low-level):

var root = create('ul', {'data-sort': 'asc'});
create('li',   {$: {innerHTML: 'one'}},   root);
create('li.x', {$: {innerHTML: 'two'}},   root);
create('li',   {$: {innerHTML: 'three'}}, root);

Let's do it with build():

var root = build(['ul', {'data-sort': 'asc'},
  ['li', 'one'], ['li.x', 'two'], ['li', 'three']]);

Let's do it with hyperscript():

var h = hyperscript;
 
var root = h('ul', {dataset: {sort: 'asc'}},
  h('li', 'one'), h('li.x', 'two'), h('li', 'three'));

Let's do it with fromHtml():

var root = fromHtml(
  '<ul data-sort="asc">' +
    '<li>one</li>' +
    '<li class="x">two</li>' +
    '<li>three</li>' +
  '</ul>'
);

How to install

With npm:

npm install --save heya-dom

With bower:

bower install --save heya-dom

How to use

heya-dom can be installed with npm or bower with files available from node_modules/ or bower_components/. By default, it uses AMD:

define(['heya-dom/build'], function (build) {
  document.body.appendChild(build([
    'p', 'Hello, world!'
  ]));
});

But it can be loaded with <script> tag from dist/:

<script src='node_modules/heya-dom/dist/build.js'></script>

And used with globals like in examples above:

document.body.appendChild(heya.dom.build([
  'p', 'Hello, world!'
]));

See How to include for more details.

Documentation

All documentation can be found in project's wiki.

Versions

• 1.0.3 — Refreshed dependencies.
• 1.0.2 — Consistently added options and dollar escapes.
• 1.0.1 — Cosmetic change: removed the missing main module.
• 1.0.0 — The initial public release as heya-dom.

License

BSD or AFL — your choice.