💡 Use `the-dom`

package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "babel-preset-es2015": "^6.3.13",
     "babelify": "^7.2.0",
-    "browserify": "^12.0.1"
+    "browserify": "^12.0.1",
+    "the-dom": "^0.1.0"
   }
 }

scripts/dom.js

@@ -1,143 +0,0 @@
-'use strict';
-
-/**
- * dom.js
- * A module that helps working with HTML elements in the DOM
- */
-
-const boundaryRegex = /\s+/g;
-
-/**
- * Add a wrapping of utility methods around a Node
- *
- * @param {Node} el Node to wrap
- * @return {Object} Utility-wrapped node
- */
-const wrapNode = (el) => Object.freeze({
-    node: el,
-
-    // shortcuts
-    get: selector => wrapNode(el.querySelector(selector)),
-    all: selector => wrapEls(el.querySelectorAll(selector)),
-
-    parent: () => wrapNode(el.parentNode),
-    children: () => wrapEls(el.childNodes),
-
-    add: subEl => el.appendChild(unwrapNode(subEl)),
-    remove: () => el.parentNode.removeChild(el),
-
-    getAttr: name => el.getAttribute(name),
-    setAttr: (name, val) => el.setAttribute(name, val),
-
-    /**
-     * Add event listeners for all given events
-     *
-     * @param {string} events Whitespace-separated list of events
-     * @param {function} listener Listener to add
-     * @return {null}
-     */
-    on: (events, listener) => {
-        events.trim().split(boundaryRegex).forEach(
-            event => el.addEventListener(event, listener)
-        );
-    },
-
-    /**
-     * Remove event listeners for all given events
-     *
-     * @param {strings} events Whitespace-separated list of events
-     * @param {function} listener Listener to remove
-     * @return {null}
-     */
-    off: (events, listener) => {
-        events.trim().split(boundaryRegex).forEach(
-            event => el.removeEventListener(event, listener)
-        );
-    }
-});
-
-/**
- * Remove a wrapping around a Node
- *
- * @param {Object|Node} el A node, wrapped or not
- * @return {Node} Unwrapped node
- */
-const unwrapNode = el => el instanceof Node ? el : el.node;
-
-/**
- * Override the methods of an Array so that it
- * can easily manipulate Nodes it contains
- *
- * @param {Array} list A list to be wrapped
- * @return {Array} Expanded list
- */
-const expandList = (list) => Object.assign(list, {
-    // shortcuts
-    on: function (events, listener) {
-        this.forEach(node => node.on(events, listener));
-    },
-
-    off: function (events, listener) {
-        this.forEach(node => node.off(events, listener));
-    },
-
-    /**
-     * Check whether this list includes given node
-     *
-     * @param {Node|Object} el Element to check
-     * @return {bool} True if this list contains `el`
-     */
-    includes: function (el) {
-        const length = this.length;
-        el = unwrapNode(el);
-
-        for (let i = 0; i < length; i += 1) {
-            if (el === unwrapNode(this[i])) {
-                return true;
-            }
-        }
-
-        return false;
-    },
-
-    /**
-     * Filter nodes in the list, removing filtered out nodes
-     *
-     * @param {function} check A function that returns true to keep given el
-     * @return {Array} New list of nodes after filtering
-     */
-    filter: function (check) {
-        const length = this.length, newList = [];
-
-        for (let i = 0; i < length; i += 1) {
-            if (!check(this[i], i, this)) {
-                this[i].remove();
-            } else {
-                newList.push(this[i]);
-            }
-        }
-
-        return expandList(newList);
-    }
-});
-
-/**
- * Turn a NodeList into a real Array of Nodes
- *
- * @param {NodeList} els List of nodes to wrap
- * @return {Array} An array of nodes
- */
-const wrapList = (els) => {
-    const result = [], length = els.length;
-
-    for (let i = 0; i < length; i += 1) {
-        result[i] = wrapNode(els[i]);
-    }
-
-    return expandList(result);
-};
-
-export const create = (name) => wrapNode(document.createElement(name));
-export const html = wrapNode(document.documentElement);
-export const head = wrapNode(document.head);
-export const body = wrapNode(document.body);

scripts/index.js

@@ -1,10 +1,11 @@
 'use strict';
 
-import { body, create } from './dom';
+import { html } from 'the-dom';
 import { randomNumber, randomColor } from './utils';
 
-const content = body.get('#content');
+const { body, create } = html(document);
-const plotting = body.get('#plotting');
+const content = body.find('#content');
+const plotting = body.find('#plotting');
 const ctx = plotting.node.getContext('2d');
 
 const padding = 40; // padding between the canvas edges and the points