Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



    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.

    browser support


    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.


    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 - 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) - Equivalent to document.querySelector(selector), selector) - Equivalent to el.querySelector(selector)
    du.qsa(selector) - Equivalent to document.querySelectorAll(selector)
    du.qsa(el, selector) - Equivalent to el.querySelectorAll(selector)


    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), 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


    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


    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.


    npm i du-dom

    Downloadslast 7 days






    last publish


    • avatar