@jsxtools/dom

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.