dom.js

Some helper functions used by Ugwisha can also be used by extensions. When passing in an array or object, null, undefined, and false values will be ignored.

Elem(tag, data = {}, children = [])

A shorthand way of creating an HTMLElement.

tag is a string representing the tag name of the element.

data is an optional object holding attributes of the element. If an array is passed in, it will be turned into a string with each item separated by a space.

• Attributes starting with on are assumed to be event listeners, mapping event names to the listener function.

• data is an object mapping data- attributes to their values.

• style is an object mapping mapping CSS properties to their values.

children is an array of Nodes and strings; the strings will be converted into text nodes.

Returns an HTMLElement.

Fragment(elems)

A shorthand way of making a DocumentFragment.

elems is an array of Nodess.

Creates and returns a DocumentFragment.

empty(elem)

Removes all children of the given element.

elem is a Node.

Example

const contentWrapper = document.getElementById('content');
empty(contentWrapper);
contentWrapper.appendChild(Fragment([
  Elem('label', {for: 'name'}, ['Your name: ']),
  Elem('input', {
    id: 'name',
    className: 'fancy-input name-input',
    placeholder: 'Billy',
    style: {
      width: '200px'
    },
    data: {
      required: 'false'
    },
    onchange() {
      alert(`Hello, ${this.value}!`);
    }
  })
]);