simple jQuery alternative for common functions, inspired by http://youmightnotneedjquery.com/

helperEl.js

/* eslint no-unused-vars:off */
var fusionHelperEl = {
	/**
	 * Find an element.
	 *
	 * @param {string|Object} selector - The css selector of the element.
	 *                                   If object then it can either be document or an element.
	 * @param {Object} parent - The parent element, or undefined for document.
	 * @return {Object} - returns the fusionHelperEl object to allow chaining methods.
	 */
	findEl: function( selector, parent ) {
		if ( document === selector ) {
			this.el = [ document ];
		} else if ( 'object' === typeof selector ) {
			this.el = selector;
		} else {
			parent  = parent || document;
			this.el = parent.querySelectorAll( selector );
		}
		return this;
	},

	/**
	 * Find a selector inside elements inited via findEl.
	 *
	 * @param {string} selector - The css selector of the element.
	 * @return {Array} - Rrturns an array of elements.
	 */
	find: function( selector ) {
		var allElements = [],
			self = this,
			i;
		for ( i = 0; i < this.el.length; i++ ) {
			allElements = allElements.concat( self.findEl( selector, this.el.length[ i ] ) );
		}
		return allElements;
	},

	/**
	 * Figure out if the element has a class or not.
	 *
	 * @param {string} className - The class-name we're looking for.
	 * @return {boolean} - Whether the element has the class we need or not.
	 */
	hasClass: function( className ) {
		if ( this.el && this.el[ 0 ] ) {
			for ( var i = 0; i < this.el.length; i++ ) {
				if ( this.el[ i ].classList && this.el[ i ].classList.contains( className ) ) {
					return true;
				}
			}
		}
		return false;
	},

	/**
	 * Add a class to elements.
	 *
	 * @param {string} className - The class-name we want to add to element(s).
	 * @return {Object} - returns the fusionHelperEl object to allow chaining methods.
	 */
	addClass: function( className ) {
		for ( var i = 0; i < this.el.length; i++ ) {
			this.el[ i ].classList.add( className );
		}
		return this;
	},

	/**
	 * Hide an element.
	 *
	 * @return {Object} - returns the fusionHelperEl object to allow chaining methods.
	 */
	hide: function() {
		if ( this.el && this.el[ 0 ] ) {
			for ( var i = 0; i < this.el.length; i++ ) {
				this.el[ i ].style.display = 'none';
			}
		}
		return this;
	},

	/**
	 * Show an element.
	 *
	 * @return {Object} - returns the fusionHelperEl object to allow chaining methods.
	 */
	show: function() {
		if ( this.el && this.el[ 0 ] ) {
			for ( var i = 0; i < this.el.length; i++ ) {
				if ( 'none' === this.el[ i ].style.display ) {
					this.el[ i ].style.display = 'initial';
				}
			}
		}
		return this;
	},

	/**
	 * Get the styles for a property, or change the value if one is defined.
	 *
	 * @param {string} property - The CSS property we're referencing.
	 * @param {string|undefined} value - The value we want to assign, or undefined if we want to get the value.
	 * @return {Object|string} - returns the fusionHelperEl object to allow chaining methods, OR the value if 2nd arg is undefined.
	 */
	css: function( property, value ) {
		var self = this;
		if ( this.el && this.el[ 0 ] ) {
			if ( 'undefined' === typeof value ) {
				return getComputedStyle( this.el[ 0 ] )[ property ];
			}

			for ( var i = 0; i < this.el.length; i++ ) {
				this.el[ i ].style[ self.helpers.camelCase( property ) ] = value;
			}
		}
		return 'undefined' === typeof value ? '' : this;
	},

	on: function( event, listener ) {

		// event can be multiple events space-separated.
		var events = event.split( ' ' ),
			i,
			l;

		// Loop events.
		for ( i = 0; i < events.length; i++ ) {

			// Loop elements.
			for ( l = 0; l < this.el.length; l++ ) {

				// Add the event listener.
				if ( 'ready' === events[ i ] ) {
					this.helpers.ready( listener );
				} else {
					this.el[ l ].addEventListener( events[ i ], listener, false );
				}
			}
		}
	},

	/**
	 * Run a callback against located elements.
	 *
	 * @param {function} callback - The callback we want to run on each element.
	 * @return {void}
	 */
	each: function( callback ) {
		var i;
		for ( i = 0; i < this.el.length; i++ ) {
			callback( this.el[ i ] );
		}
	},

	/**
	 * Helper Methods.
	 */
	helpers: {
		/**
		 * Convert a string to camelCase.
		 *
		 * @param {string} string The string we want to convert.
		 * @return {string} - Returns the string formatted in camelCase.
		 */
		camelCase: function( string ) {
			return string.replace( /-([a-z])/g, function( _all, letter ) {
				return letter.toUpperCase();
			} );
		},

		/**
		 * Equivalent to jQuery's ready() function.
		 *
		 * @see https://gomakethings.com/a-native-javascript-equivalent-of-jquerys-ready-method/
		 * @param {function} fn - The callback function.
		 * @return {void}
		 */
		ready: function( fn ) {
			if ( 'function' !== typeof fn ) { // Sanity check
				return;
			}

			// If document is already loaded, run method
			if ( document.readyState === 'complete'  ) {
				return fn();
			}

			// Otherwise, wait until document is loaded
			document.addEventListener( 'DOMContentLoaded', fn, false );
		}
	}
};

Usage

var el = jQuery( .foo' );

becomes:

var el = fusionHelperEl.findEl( '.foo' );

---

Implemented:

• .find()
• .hasClass()
• .addClass()
• .hide()
• .show()
• .css()
• .on()
• .each()