elemental-js

A tiny (520 bytes) and fast DOM manipulation library for use with plain JavaScript

API

el.el()

Search the document for an element with a particular CSS selector

Parameters

• selector (string) - the CSS selector to match against

Return:

(HTMLElement) the first matching element

Example

// <div class="content">
//   <div id="myDiv">
//     We want to add a click event listener to this div
//   </div>
// </div>
const myDiv = el.el("#myDiv")
myDiv.addEventListener("click", event => alert("myDiv was clicked"))

el.h()

Create a new HTML DOM element

Parameters

• tag (string) - the type/tag of the element to construct
• attributes (Object) - {"key": "value", ...} attributes the element should have
• children (HTMLElement[] | string[]) - elements to append to the new element as children. Strings are automatically converted to Text nodes

Return:

(HTMLElement) the newly created element

Example

// Create HTML DOM element equivalent to
// <div class="content">
//   <p>A paragraph with <a href="http://example.com/">a link</a></p>
// </div>
const contentDiv = el.h("div", {class: "content"}, [
  el.h("p", {}, [
    "A paragraph with ", el.h("a", {href: "http://example.com/"}, ["a link"]
  ]
])

el.append()

Append child elements to another element

Parameters

• el (HTMLElement) - the parent element
• children (HTMLElement[] | string[]) - elements to append to el as children. Strings are automatically converted to Text nodes

Example

// Before:
// <div id="myDiv">
// </div>

const myDiv = el.el("#myDiv")
el.append(myDiv, [
  el.h("p", {}, ["Hello, World!"])
])

// After:
// <div id="myDiv">
//   <p>Hello, World!</p>
// </div>

el.clear()

Search the document for an element with a particular CSS selector and delete all of its child elements

Parameters

• selector (string) - the CSS selector to match against

Return:

(HTMLElement) the first matching element

Example

// Before:
// <div id="myDiv">
//   <p>Hello, World!</p>
// </div>

const myDiv = el.clear("#myDiv")

// After:
// <div id="myDiv">
// </div>

el.clearElement()

Delete all of the given element's child elements

Parameters

• el (HTMLElement) - the parent element

Return:

el (HTMLElement)

Example

// Before:
// <div id="myDiv">
//   <p>Hello, World!</p>
// </div>

const myDiv = el.el("#myDiv")
el.clearElement(myDiv)

// After:
// <div id="myDiv">
// </div>

Benchmarks

Measuring operations per second (higher is better) in Chrome 59.0.3071 / Windows 10 0.0.0

Summary

	Select (Ops/sec)	Clear (Ops/sec)	Create/Append (Ops/sec)
elemental-js	12,351,821	76,287,755	150,784
jQuery 3.2	2,081,431	2,191,646	59,799
innerHTML		442,922	86,772

Select

elemental-js: 12,351,821 Ops/sec

const myDiv = el.el("#myDiv")

jQuery 3.2: 2,081,431 Ops/sec

const myDiv = $("#myDiv")

Clear

elemental-js: 76,287,755 Ops/sec

el.clearElement(myDiv)

jQuery 3.2: 2,191,646 Ops/sec

myDiv.empty()

innerHTML: 442,922 Ops/sec

myDiv.innerHTML = ""

Create/append

elemental-js: 150,784 Ops/sec

el.append(myDiv, [
  "testing ",
  el.h("a", {href: "http://example.com"}, ["link"])
])

jQuery 3.2: 59,799 Ops/sec

myDiv.html('testing <a href="http://example.com">link</a>');

innerHTML: 86,772 Ops/sec

myDiv.innerHTML = 'testing <a href="http://example.com">link</a>'