# dom-script > Create DOM nodes using a concise API, similar to hyperscript Latest version **0.1.1** (published 2017-03-01) · MIT license · 0 weekly downloads ## Install ```sh npm install dom-script pnpm add dom-script yarn add dom-script bun add dom-script ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.1 | | Published | 2017-03-01 | | First published | 2017-03-01 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Nik Coughlin | | Maintainers | nrkn | ## Links - npm: https://www.npmjs.com/package/dom-script - Repository: https://github.com/mojule/dom-script - Homepage: https://github.com/mojule/dom-script#readme - Issues: https://github.com/mojule/dom-script/issues - npm.io page: https://npm.io/package/dom-script ## Dependencies (1) - [html-script](https://npm.io/package/html-script.md) ^0.1.2 ## Recent versions - 0.1.1 (latest) — 2017-03-01 - 0.1.0 — 2017-03-01 ## README # dom-script Create DOM nodes in the browser using a concise API, like [hyperscript](https://github.com/hyperhype/hyperscript). This is an implementation of [html-script](https://github.com/mojule/html-script) using an adapter over the real DOM (or JSDOM etc., see below) - to use this API with a different backing structure, eg some virtual DOM or whatever, see the [html-script readme](https://github.com/mojule/html-script/blob/master/readme.md) ## Example ```javascript 'use strict' const H = require( 'dom-script' ) const { document, documentType, text, comment, documentFragment, element, html, head, body, meta, title, div, p, strong, input } = H const dom = document( documentType('html'), html( head( meta({charset:'utf-8'}), title('Hello World!') ), body( comment('Whose line is it anyway?'), div({id:'main'}, p('The quick brown fox jumps over the ',strong('lazy dog')), input({type:'text',name:'firstName',placeholder:'Alex'}) ), comment('Fragment not (usually) necessary but make sure it works'), documentFragment( comment('Text not necessary but etc.'), p(text('lol '),'wut') ), comment('But what if it is not in the spec?'), element('customtag',{class:'kk'}, p('OK that works for me') ) ) ) ) ``` ```html Hello World!

The quick brown fox jumps over the lazy dog

lol wut

OK that works for me

 ``` See also [dom-script running in the browser](/example/index.html) ## Installation and usage `npm install dom-script` ```javascript const H = require( 'dom-script' ) // now destructure out the functions you want - alternatively, use H.div etc. const { div, p, comment, element } = H // any objects passed will be treated as attributes //
const main = div( { id: 'main' } ) // any strings passed will be treated as text nodes //

Hello world!

const hello = p( 'Hello world!' ) // non-element nodes also supported // const helloComment = comment( 'Hello world!' ) // any nodes passed will be appended to the parent //

Hello

World

const nested = div( p( 'Hello' ), p( 'World' ) ) // stick in the real DOM document.body.appendChild( nested ) // if html-script doesn't have the element you want // Hello world! const custom = element( 'custom', { id: 'myCustom' }, 'Hello world!' ) ``` ## Attributes An object passed to a `dom-script` function is treated as though it were an attribute map for the node. For the most part, it is expected to be a simple map of attribute name to attribute value, and the value is expected to be a string, with some exceptions listed below. ```javascript const nameField = div( label( { for: 'firstName' }, 'First Name' ), input( { type: 'text', name: 'firstName' } ) ) ``` ```html
``` ### boolean attributes To make working with boolean attributes easier, any attribute that has a boolean value will be treated as though the boolean attribute is present on the node if the value is `true`, and absent if the value is `false`: ```javascript div( input( { type: 'radio', checked: true } ), input( { type: 'radio', checked: false } ) ) ``` ```html
``` ### style Either a string, or an object of name value pairs: ```javascript div( p( { style: 'font-family: sans-serif' }, 'Hello' ), p( { style: { 'font-family': 'sans-serif', 'font-size': '1rem' }, 'World' ) ) ``` ```html

Hello

World

``` ### data An attribute named `data` with an object value will be treated similarly to the [dataSet](https://developer.mozilla.org/en/docs/Web/API/HTMLElement/dataset) property on DOM nodes, that is, the object keys will be converted from camelCase to dash-style with a `data-` prefix. This makes it easy to use your existing models to set data attributes without having to first mangle the names: ```javascript div( { data: { firstName: 'Nik', lastName: 'Coughlin' } } ) ``` ```html
``` ### functions If an attribute value is a function and the name starts with 'on', it's considered to be an event handler: ```javascript div( { onclick: e => window.alert( 'Clicked!' ) } p( 'Hello world!' ) ) ``` ### other types All other values are converted to a string via `String( value )` ## Using with JSDOM or other DOM compatible interfaces Get an instance of document using whatever technique the interface supports, then call `dom-script` as a function with that document instance. So instead of: ```javascript const H = require( 'dom-script' ) ``` Do this: ```javascript const H = require( 'dom-script' )( document ) ``` With JSDOM this would look something like: ```javascript const document = require( 'jsdom' ).jsdom( '' ) const H = require( 'dom-script' )( document ) const { div } = H div( 'Hello World' ) // etc ``` ## JsonML Because JsonML is a convenient format for transportation and persistence, a helper method is provided to populate your DOM from `JsonML` data: ```javascript const H = require( 'dom-script' ) const jsonML = require( './path/to/some/data.json' ) const dom = H.fromJsonML( jsonML ) ``` --- _Source: https://npm.io/package/dom-script · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._