DOM Toolbox -- jQ

$$.es6.js

/**
    Syntax for $(q,c)
    $('div.someClass') // [<div.someClass />,<div.someClass />]
    
    $$('div.someClass') // $$[<div.someClass />,<div.someClass />]
        .first() // <div.someClass />
        .$first() // $$[<div.someClass />]
        .last() // <div.someClass />
        .$last() // $$[<div.someClass />]

    $$('div.someClass')
        .on('mouseover mousemove',e=>e.currentTarget.style.background='yellow')
        .on('mouseout',e=>e.currentTarget.style.background='')
        
    
**/

const $ = (q, c) => Array.prototype.slice.call((c instanceof Element ? c : document).querySelectorAll(q))
const $$ = (q, c) => {
    class EC extends Array {
        on(evtArr, cb) {
            ;(Array.isArray(evtArr) ? evtArr : evtArr.trim().split(' ')).forEach(evt => this.forEach(e => e.addEventListener(evt, cb.bind(e))))
            return this
        }
      
        each(fn){
          this.forEach(e=>fn($$(e)))
        }
      
        first(offset=0){
          if(this.length>(offset))return this[offset]
        }
      
        $first(offset=0){
          return $$(this.first(offset))
        }
      
        last(offset=0){
          offset=this.length - 1 - (offset || 0)
          if(offset >= 0) return this[offset]
        }
      
        $last(offset=0){
          return $$(this.last(offset))
        }
      
        nearest(q){
          let target = this.first()
          while(target instanceof Element){
             target=target.parentNode
             if (target!==document && target.matches(q)) return target
          }
          return null
        }
      
        $nearest(q){
          return $$(this.nearest(q))
        }
    }

    const l = new EC()
    return l.concat((q instanceof Element?[q]:(Array.isArray(q)?q:Array.prototype.slice.call((c instanceof Element ? c : document).querySelectorAll(q)))))
}

$.v2.es6.js

const $ = (q, c) => {
    let sel = Object.defineProperties(
        Array.isArray(q) ? Array.prototype.slice.call(q) : q instanceof Element ? [q] : Array.prototype.slice.call((c instanceof Element ? c : document).querySelectorAll(q)),
        {
            on: {
                value(evtArr, cb) {
                    ;(Array.isArray(evtArr) ? evtArr : evtArr.trim().split(' ')).forEach(evt => this.forEach(e => e.addEventListener(evt, cb.bind(e))))
                    return this
                }
            },
            each: {
                value(fn, wrap = false) {
                    this.forEach(e => (wrap ? fn($(e)) : fn(e)))
                }
            },
            first: {
                get() {
                    return this.length ? this[0] : null
                }
            },
            last: {
                get() {
                    let offset = this.length - 1
                    if (offset >= 0) return this[offset]
                }
            },
            nearest: {
                value(q) {
                    let target = this.first()
                    while (target instanceof Element) {
                        target = target.parentNode
                        if (target !== document && target.matches(q)) return target
                    }
                    return null
                }
            },
            matching: {
                value(q) {
                    return $(this.filter(e => e.matches(q)))
                }
            },
            add: {
                value(q) {
                    $(q).forEach(e => this.push(e))
                    return this
                }
            },
            unwrap: {
                get() {
                    return Array.prototype.slice.call(this)
                }
            },
            find: {
                value(q) {
                    let found = $([])
                    this.forEach(e => {
                        found.add($(q, e))
                    })
                    return found
                }
            }
        }
    )
    return sel
}

$('nav')
    .find('li.menu_item.parent')
    .on('mouseover mousemove', e => (e.currentTarget.style.backgroundColor = 'red'))
    .on('mouseout', function(e) {
        this.style.backgroundColor = ''
    })

betterAddEventListener.es6.js

let elem = document.createElement('div')
let eventHandler=function(){}
['keydown','touchstart'].forEach(evt=>{
  elem.addEventListener(evt,eventHandler.bind(elem))
})
/*
You could also just do this:

$$(elem).on('keydown touchstart',()=>{})
*/

dom.create.es6.js

const elem = (type, attr = {}, body) => {
    if (Array.isArray(type)) {
        attr = Object.assign({}, type[1] || {}, attr)
        type = type[0]
    }
    let el = document.createElement(type)
    for (let key in attr) {
        if (key === 'class') {
            el.classList.add.apply(el.classList, attr[key])
        } else {
            el[key] = attr[key]
        }
    }
    if (body) el.appendChild(body)
    return el
}
elem.form = elem.bind(this, ['form', { method: 'post' }])
elem.input = elem.bind(this, ['input', { type: 'text' }])
elem.hidden = elem.bind(this, ['input', { type: 'hidden' }])
elem.date = elem.bind(this, ['input', { type: 'date' }])
elem.email = elem.bind(this, ['input', { type: 'email' }])

const elems = (...elements) => {
    let frag = document.createDocumentFragment()
    elements.forEach(el => frag.appendChild(el))
    return frag
}