DOM: the venerable Dojo DOM utilities.
JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
tests
.editorconfig
.gitignore
.travis.yml
AUTHORS
LICENSE
README.md
bower.json
build.js
create.js
fromHtml.js
hyperscript.js
package.json
place.js

README.md

dom

Build status Dependencies devDependencies NPM version

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.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.