ES5 compatible DOM helper functions

classFunctions.js

/**
 * Returns true, if the given element contains the given class. False otherwise.
 * @param {Element} element
 * @param {String} className
 * @returns {boolean}
 */
function hasClass(element, className) {return getClasses(element).indexOf(className) !== -1;}

/**
 * Gets all classes of the given element.
 * @param {Element} element
 * @returns {String[]}
 */
function getClasses(element) {
  if (!(element instanceof Element)) {return [];}
  return element.className.split(' ').filter(function (className) {return className !== '';});
}

/**
 * Replaces all classes of the given element by the given Array of classes.
 * @param {Element} element
 * @param {String[]} classNames
 */
function setClasses(element, classNames) {
  if (!Array.isArray(classNames)) {return;}
  if (!(element instanceof Element)) {return;}
  element.className = classNames.filter(function (className) {return className !== '';}).join(' ');
}

/**
 * Adds a new class to the given element
 * @param {Element} element
 * @param {String} className
 */
function addClass(element, className) {
  if (!(element instanceof Element)) {return;}
  if (hasClass(element, className)) {return;}
  setClasses(element, getClasses(element).concat(className));
}

/**
 * Removes a class from the given element.
 * @param {Element} element
 * @param {String} className
 */
function removeClass(element, className) {
  if (!(element instanceof Element)) {return;}
  var currentClasses = getClasses(element);
  var classNameIndex = currentClasses.indexOf(className);
  setClasses(element, currentClasses.slice(0, classNameIndex).concat(currentClasses.slice(classNameIndex + 1)));
}

getParents.js

/**
 * Returns an array of all parents of an element to the root element.
 * @param {Element} element - The element to get the parents of.
 * @param {boolean} containSelf - If true the result also contains the element itself.
 * @returns {Element[]}
 */
function getParents(element, containSelf)
{
  var result = [];
  
  if (element instanceof Element) {
    next(element.parentElement);

    if (containSelf) {
      result.push(element);
    }
  }
  
  return result;
  
  function next(parent)
  {
    if (parent !== null) {
      result.push(parent);
      next(parent.parentElement);
    }
  }
}

getSiblings.js

/**
 * Returns an array of all siblings of an element.
 * @param {Element} element - The element to get the siblings of.
 * @param {boolean} containSelf - If true the result also contains the element itself.
 * @returns {Element[]}
 */
function getSiblings(element, containSelf)
{
  var result = [];
  
  if (element instanceof Element) {
    if (element.parentElement) {
      result = [].slice.call(element.parentElement.children);
    
      if (!containSelf) {
        result.splice(result.indexOf(element), 1);
      }
    }
    else if (containSelf) {
      result.push(element);
    }
  }
  
  return result;
}

selectors.js

function $$class(className) {
  return Array.prototype.slice.apply(document.getElementsByClassName(className));
}

function $class(className) {
  return $$class(className)[0];
}

function $id(id) {
  return document.getElementById(id);
}

function on(element, event, callback, useCapture) {
  if (Array.isArray(element)) {
    return element.map(function (element) {return on(element, event, callback, useCapture);});
  }

  return element.addEventListener(event, callback, !!useCapture || false);
}