du-dom

#du

The DOM library for coders who don't need a DOM library.

du ( DOM Utilities) is a simple, light library that makes common DOM manipulation tasks easy by providing cross-browser helper functions. It operates on native DOM objects and doesn't force you into any major changes from a vanilla JS approach.

du is still a work in progress with a very unstable API. Feel free to make comments and recommend changes at this time.

###Background

I started out in web development using vanilla DOM methods. It was useful to learn about things like w3c standards and cross-browser compatibility issues, but it was rather tedious dealing with those and the DOM API's wordiness. After a bit of searching I couldn't find a library I liked that both made using the DOM terse and simple and didn't force entirely new coding styles on me. So I decided to put together some of the utility functions I found useful to make a library that could make web programming quicker and easier without deviating from the way the DOM was meant to be used.

###API

First of all, du inherits from document, so the functions on document can be accessed as properties of du. For example, du.createElement is a quicker way of accessing document.createElement. (Note that modifying these properties will not modify the corresponding document properties. Also, IE doesn't like accessing non-function properties like document.body from objects other than document, so those won't work in IE.)

Note: el as a parameter means an HTMLElement.

####Queries

du.id(id) - Equivalent to document.getElementById(id)

du.tag(tag) - Equivalent to document.getElementsByTagName(tag)
du.tag(el, tag) - Equivalent to el.getElementsByTagName(tag)

du.class(className) (alias: du.className) - Equivalent to document.getElementsByClassName(className). du.className should be used instead of du.class in IE8 and other non-ES5 environments. du.className(el, className) (alias: du.className) - Equivalent to document.getElementsByClassName(className)

du.qa(selector) - Equivalent to document.querySelector(selector)
du.qa(el, selector) - Equivalent to el.querySelector(selector)
du.qsa(selector) - Equivalent to document.querySelectorAll(selector)
du.qsa(el, selector) - Equivalent to el.querySelectorAll(selector)

####Events

du.event(target, type, listener, [useCapture]) - Equivalent to target.addEventListener(type, listener, useCapture). Note that useCapture will not do anything on browsers that don't support addEventListener
du.event(type, listener, [useCapture]) - Equivalent to window.addEventListener(type, listener, useCapture)
du.rmEvent(target, type, listener, [useCapture]) - Equivalent to target.removeEventListener(type, listener, useCapture)

du.load(listener) - Equivalent to window.addEventListener("load", listener)
du.ready(listener) - Equivalent to window.addEventListener("DOMContentLoaded", listener) or jQuery's $(document).ready(listener)
du.click(target, listener) - Equivalent to target.addEventListener("click", listener)

####DOM Mutations

du.clear(node) - Removes all of the child nodes of a node
du.setChild(node, child) - Removes all the child nodes of a node and appends child to it

du.prepend(node, child) - Inserts child as the node's first child
du.append(node, child) - Equivalent to node.appendChild(child)
du.remove(node) - Removes the given node

du.textNode(text) - Equivalent to document.createTextNode(text)
du.appendText(node, text) - Appends the given text to node
du.setText(node, text) - Removes all child text nodes from a node and appends the given text to it

du.insertAfter(node, newNode, referenceNode) - Inserts newNode as a child element of node after referenceNode

####CSS

du.addClass(el, ...classes) - Adds the given classes to an element
du.rmClass(el, ...classes) - Removes the given classes from an element

du.getComputedStyle(el) - Equivalent to window.getComputedStyle, but du.getStyle and du.setStyle are probably more useful
du.getStyle(el, prop) - Returns the computed value of the CSS property prop on the element
du.setStyle(el, prop, value) - Sets the value of the CSS property prop to value

####Utilities

du.toArray(arrayLike) - Converts an array-like (e.g., a NodeList) to an array

du.each(arrayLike, fn) - Iterates through the elements of an array-like or an array, calling fn on each element and returning an array of the results. fn is called with the current element, the index, and the array-like as arguments

©2013 j201. Released under the MIT License.