DOM

DOM lets you create and transform DOM objects with a class-like JavaScript API.

new HTML.Element("div")
// vs document.createElement("div")

new HTML.Element('a', { href: '/path/to/some/page' })
// vs __el = document.createElement('a')
//    __el.setAttribute('href', '/path/to/some/page')

Usage

Node Package Manager

npm install @jsxtools/dom

Javascript

import { HTML, SVG, MathML } from 'http://unpkg.com/@jsxtools/dom'

// add HTML, SVG, & MathML to the global object
import '@jsxtools/dom/global'

HTML

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@jsxtools/dom"
></script>

<!-- add HTML, SVG, & MathML to the global object -->
<script
  src="https://cdn.jsdelivr.net/npm/@jsxtools/dom/global.js"
></script>

DOM API

The HTML.Element, SVG.Element, and MathML.Element classes create elements by tag name.

const div = new HTML.Element('div') // HTMLDivElement

Set

The set method assigns attributes or children to the given element, returning the given element.

const anchorLink = new HTML.Element('a') // HTMLAnchorElement

HTML.set(anchorLink, { href: '/path/to/some/page' })

const button = new HTML.Element('button') // HTMLButtonElement

HTML.set(button, { type: 'button' },
  'Download',
  new HTML.Element('img', { src: '/path/to/presentational-image', 'aria-hidden': 'true' })
)

The set method treats void and boolean values as attribute toggles.

const button = new HTML.Element('button') // HTMLButtonElement

HTML.assign(button, { disabled: true }) // <button disabled></button>

Generating MathML Elements

The MathML class creates MathML elements.

new MathML('math', { display: 'inline' },
  new MathML('mfrac',
    new MathML('msup',
      new MathML('mi', 'π'),
      new MathML('mn', '2')
    ),
    new MathML('mn', '6')
  )
)

Generating SVG Elements

The SVG class creates SVG elements.

new SVG('svg', { width: 150, height: 100, viewBox: '0 0 300 200' },
  new SVG('rect', { width: '100%', height: '100%', fill: 'red' }),
  new SVG('circle', { cx: 150, cy: 100, r: 80, fill: 'green' }),
  new SVG('text', { x: 150, y: 125, 'font-size': 60, 'text-anchor': 'middle', fill: 'white' },
    'SVG'
  )
)

Augmenting Native Elements

The HTML.Element, SVG.Element, and MathML.Element classes can be used to extend native element, allowing authors to create native elements with special abilities.

class CustomDivElement extends HTML.Element {
  get special() {
    return 'ability'
  }
}

const customDiv = new CustomDivElement('div');

customDiv.special // "ability"

Strong Typing

Detailed typing is provided for the HTML.Element, SVG.Element, and MathML.Element classes, as well as the HTML.set, SVG.set, and MathML.set methods.

new HTML.Element("a", {
  h /*
       suggested attribute names:

     | "href" | "hidden" | "hreflang"
     | "aria-haspopup" | "aria-hidden"

new HTML.Element("a", {
  role: /*
           suggested attribute values:

         | "button" | "option" | "checkbox"
         | "menuitem" | "menuitemcheckbox"
         | "menuitemradio" | "radio"
         | "switch" | "tab" | "treeitem"

Typing is provided curtesy of the amazing HTMLType project by Lucas M. Segurado. HTMLType is licensed MIT.

File size

DOM minifies to 614 bytes before compression.

| Package | Compression | Filesize | |:---------- |:----------- | --------:| | Module | none | 646B | | | gzip | 423B | | | brotli | 352B | | Common | none | 633B | | | gzip | 429B | | | brotli | 356B | | Global | none | 614B | | | gzip | 420B | | | brotli | 349B |

Acknowledgements

Code original to this project is licensed CC0-1.0.

Typing from HTMLType is licensed MIT.