No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
lib
util
.gitignore
README.md
entry.js
index.html
webpack.config.js

README.md

#DOMination

See it live

DOMination is a fully-functional DOM manipulation library, written entirely in native Javascript. Specifically, it is inspired by the functionality of jQuery.

Core $l functionality

Like jQuery, the core function can serve a number of purposes. It can

  • create an HTML element from a string, such as <li>
  • find a DOM element on the page via a CSS selector
  • coerce an object into a custom DomNodeCollection

Wrappers

Much of jQuery's functionality has been implemented using only native JavaScript, wrapped in functions like so:

Functionality includes:

  • adding/removing/toggling CSS classes
  • getting/setting CSS properties
  • finding other HTML elements in a parent node's descendants
  • adding/removing event listeners

Examples:

on(eventType, callback) {
  this.each( el => {
    el.addEventListener(eventType, callback);

    const eventKey = `eventKey-${eventType}`;
    if (typeof el[eventKey] === "undefined") { el[eventKey] = []; }
    el[eventKey].push(callback);
  });
}

children() {
  let children = [];
  this.each( el => children = children.concat(Array.from(el.children)));

  return new DomNodeCollection(children);
}

AJAX and Document Ready

Document ready callbacks are stored in a queue and dispatched accordingly. Basic AJAX requests can be made using $l.ajax(options).

Implementation Example: JawaScript

Jawascript is a simple app made entirely using DOMination. It uses a public Star Wars API to give users much-needed info on obscure Star Wars details.