mdxprograms
4/7/2016 - 1:05 PM

DOM.js

/**
 * jQuery like DOM class
 * @class
 */
class DOM {
    /**
    * create a new array like object of elements
    * @constructor
    */
    constructor( selector ) {
        var elements = document.querySelectorAll(selector);
        
        this.length = elements.length;
        
        Object.assign(this, elements);
    }
    
    /**
    * @param {Function} callback A callback to call on each element
    */
    each( callback ) {
        // convert this to Array to use for...of
        for ( let el of Array.from(this) ) {
            callback.call( el );
        }
        
        // return this for chaining
        return this;
    }
    
    /**
    * Add a class to selected elements
    * @param {String} className The class name to add
    */
    addClass( className ) {
        return this.each(function() {
            this.classList.add(className);
        });
    }
    
    /**
    * Remove a class from selected elements
    * @param {String} className The class name to remove
    */
    removeClass( className ) {
        return this.each(function() {
            this.classList.remove(className);
        });
    }
    
    /**
    * Check to see if the element has a class
    * (Note: Only checks the first elements if more than one is selected)
    * @param {String} className The class name to check
    */
    hasClass( className ) {
        return this[0].classList.contains(className);
    }
    
    /**
    * Attach an event listener with a callback to the selected elements
    * @param {String} event Name of event, eg. "click", "mouseover", etc...
    * @param {Function} callback The function to call when the event is triggered
    */
    on( event, callback ) {
        return this.each(function() {
            this.addEventListener(event, callback, false);
        });
    }
};

export var $ = selector => new DOM(selector);