DOM.js is a lightweight, fast cross browser (IE 8+, FF31+, SF5+, CH31+, OP24+) library for DOM traversal, manipulation and event handling. Dom.js also includes drag library for simplify crossbrowser drag operations.

Only 5KB compressed and gzipped!

###Table of contents

• DOM traversal

  • Dom.find
  • Dom.id
  • Dom.findByTagName
  • Dom.findByClass
  • Dom.parent
  • Dom.children
  • Dom.next
  • Dom.previous

• DOM manipulation

  • [Dom.offset] (#domoffsetelement)
  • [Dom.width] (#domwidthelement)
  • [Dom.height] (#domheightelement)
  • Dom.attribute
  • Dom.css
  • Dom.getClass
  • Dom.addClass
  • Dom.hasClass
  • Dom.removeClass
  • Dom.create
  • Dom.html
  • Dom.text
  • Dom.append
  • Dom.prepend
  • Dom.after
  • Dom.before
  • Dom.replace
  • Dom.remove
  • Dom.template
  • Dom.draggable

• Utils

  • Dom.requestAnimationFrame
  • Dom.cancelAnimationFrame
  • Dom.isElement
  • Dom.isNode

• Event handling

  • Dom.addListener
  • Dom.removeListener
  • Dom.hasListener
  • Dom.dispatch

• Dom Events

  • Mouse Events
    • click
    • dblclick
    • mouseover
    • mouseout
    • mousedown
    • mouseup
    • mouseenter
    • mouseleave
    • mousemove
  • Form Events
    • focus
    • blur
    • select
    • change
    • submit
    • reset
  • Keyboard Events
    • keydown
    • keyup
    • keypress

Finds HTMLElements that match css pattern.

Supported from IE 8.0, FF 3.5, Chrome 4.0, Safari 3.1 Partial support in IE8 is due to being limited to CSS 2.1 selectors as well as only supporting simple selectors (not descendant selectors like p a)

• selector css seletor eg.(ul > li)

Returns HTMLElement with given id

• id element's id

Finds HTMLElements that match given tag name

• tagName tag's name eg.(a, span, div, etc)

Finds HTMLElements that match given class name

Supported from IE 8.0, FF 3.5, Chrome 4.0, Safari 3.1

• className css class name

Gets the parent of the html element

• element html element

Gets children elements of the html element

• element html element
• tag determines whether text nodes should be returned or tells function to filter children by tagname

Gets following sibling element of the HTMLElement

• element html element

Gets previous sibling element of the HTMLElement

• element html element

Returns current coordinates of the element, relative to the document. Returned object contains properties:

• top
• right
• bottom
• left
• width
• height

• element html element

Returns width of the element

• element html element

Returns height of the element

• element html element

Gets or sets element's attribute(s) if the attribute(s) is not defined this method returns an empty string

• element html element
• attribute attribute name, array of attribute names or object

Sets or gets HTMLElement's style

• element html element
• style css property name, array of css properties or object

Gets css classes of the given element

• element html element

Assignes css class(es) to the html element(s)

• element html element or array of elements
• className class(es) that will be assigned to the element

Checks whether html element is assigned to the given class(es)

• element html element or array of elements
• className class that function will check against

Removes html element's assignment to the css class(es)

• element html element or array of elements
• className class(es) that will be removed from the element's class attribute

Creates and returns html element created from provided content

• html html string

Creates a copy of a node, and returns the clone.

• element html element

Gets or sets inner html of HTMLElement

• element html element
• html html string

Gets or sets text value of the HTML element

• element html element
• text text string

Inserts content specified by the html argument at the end of HTMLElement

• element html element
• html html string or element that will be inserted

Inserts content specified by the html argument at the beginning of HTMLElement

• element html element
• html html string or element that will be inserted

Inserts content specified by the html argument after the HTMLElement

• element html element after which html content will be placed
• html html string or element that will be inserted

Inserts content specified by the html argument before the HTMLElement

• element html element before which html content will be placed
• html html string or element that will be inserted

Replaces given html element with content specified in html parameter

• element html element that will be replaced
• html html string or element that will be inserted

Removes HTMLElement from dom tree

• element html element that will be removed

• html string containings element's html
• className class(es) that will be removed from the element's class attribute

Parses micro template string. Replaces {{ tag }} occurrences in string into values taken from hash object. Supports functions, numbers and strings.

• tpl micro template string
• hash hash object

Makes html element draggable.

• element html element
• options options hash

• axis String (x or y) constrains movement to x or y axis
• grid Array ([x, y]) snaps the element to a grid
• handler HTMLElement specifies on what element the drag starts
• onDragStart sets callback function which will be called when drag starts
• onDragMove sets callback function which will be called when dragged elements move
• onDragEnd sets callback function which will be called when drag ends
• constrain HTMLElement constrains movement to element's area or given box [x0, y0, width, height]

The Window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint. learn more

Cancels an animation frame request previously scheduled through a call to Dom.requestAnimationFrame learn more

Checks if given object is a DOMElement.

• object input object

Checks if given object is a DOMNode.

• object input object

Attaches javascript listener to the element(s) for the given event type.

• element a DOMElement, NodeList or just an array with DOMElements
• event a dom event name, eg. (click, dblclick, etc.)
• listener a javascript function wich will be called when given event occurs

Dom.js also offers aliases for Dom.addListener function. You can check list of aliases, explanation and event names here.

Removes javascript listener from the element(s) for the given event type.

• element a DOMElement, NodeList or just an array with DOMElements
• event a dom event name, eg. (click, dblclick, etc.)
• listener a javascript function wich will be called when given event occurs

Execute all handlers and behaviors attached to the element(s) for the given event type

• element a DOMElement, NodeList or just an array with DOMElements
• event a dom event name, eg. (click, dblclick, etc.)
• options event options object eg. (screenX, screenY, etc.)

Determine whether a supplied listener is attached to the element

• element a DOMElement, NodeList or just an array with DOMElements
• event a dom event name, eg. (click, dblclick, etc.)
• listener a javascript callback function

###DOM Events

#####click Dom.onClick(element|nodeList|Array, listener) A pointing device button has been pressed and released on an element.

#####dblclick Dom.onDblClick(element|nodeList|Array, listener) A pointing device button is clicked twice on an element.

#####mouseover Dom.onMouseOver(element|nodeList|Array, listener) A pointing device is moved onto the element that has the listener attached or onto one of its children.

#####mouseout Dom.onMouseOut(element|nodeList|Array, listener) A pointing device is moved off the element that has the listener attached or off one of its children.

#####mousedown Dom.onMouseOut(element|nodeList|Array, listener) A pointing device button (usually a mouse) is pressed on an element.

#####mouseup Dom.onMouseUp(element|nodeList|Array, listener) A pointing device button is released over an element.

#####mouseenter Dom.onMouseEnter(element|nodeList|Array, listener) A pointing device is moved onto the element that has the listener attached.

#####mouseleave Dom.onMouseLeave(element|nodeList|Array, listener) A pointing device is moved off the element that has the listener attached.

#####mousemove Dom.onMouseMove(element|nodeList|Array, listener) A pointing device is moved over an element.

#####focus Dom.onFocus(element|nodeList|Array, listener) An element has received focus (does not bubble).

#####blur Dom.onBlur(element|nodeList|Array, listener) An element has lost focus (does not bubble).

#####select Dom.onSelect(element|nodeList|Array, listener) Some text is input being selected.

#####change Dom.onChange(element|nodeList|Array, listener) An element loses focus and its value changed since gaining focus.

#####submit Dom.onSubmitelement|nodeList|Array, listener) A form is submitted.

#####reset Dom.onReset(element|nodeList|Array, listener) A form is reset.

#####keydown Dom.onKeyDown(element|nodeList|Array, listener) A key is pressed down.

#####keyup Dom.onKeyUp(element|nodeList|Array, listener) A key is released.

#####keypress Dom.onKeyPress(element|nodeList|Array, listener) A key is pressed down and that key normally produces a character value (use input instead).

#####drag Dom.onDrag(element|nodeList|Array, listener) An element or text selection is being dragged (every 350ms).

#####dragstart Dom.onDragStart(element|nodeList|Array, listener) The user starts dragging an element or text selection.

#####dragend Dom.onDragEnd(element|nodeList|Array, listener) A drag operation is being ended (by releasing a mouse button or hitting the escape key).

#####load Dom.onLoad(element|nodeList|Array, listener) A resource and its dependent resources have finished loading.

#####scroll Dom.onScroll(element|nodeList|Array, listener) The document view or an element has been scrolled.

#####unload Dom.onUnload(element|nodeList|Array, listener) The document or a dependent resource is being unloaded.

#####resize Dom.onResize(element|nodeList|Array, listener) The document view has been resized.