DOM.js

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!

API Reference

###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

Dom.find(selector)

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)

Parameters

• selector css seletor eg.(ul > li)

Example

Dom.id(id)

Returns HTMLElement with given id

Parameters

• id element's id

Example

Dom.findByTagName(tagName)

Finds HTMLElements that match given tag name

Parameters

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

Example

Dom.findByClass(className)

Finds HTMLElements that match given class name

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

Parameters

• className css class name

Example

Dom.parent(element)

Gets the parent of the html element

Parameters

• element html element

Example

Dom.children(element, tag)

Gets children elements of the html element

Parameters

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

Example

Dom.next(element)

Gets following sibling element of the HTMLElement

Parameters

• element html element

Example

Dom.previous(element)

Gets previous sibling element of the HTMLElement

Parameters

• element html element

Example

Dom.offset(element)

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

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

Parameters

• element html element

Example

Dom.width(element)

Returns width of the element

Parameters

• element html element

Example

Dom.height(element)

Returns height of the element

Parameters

• element html element

Example

Dom.attribute(element, attribute)

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

Parameters

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

Example

Dom.css(element, style)

Sets or gets HTMLElement's style

Parameters

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

Example

Dom.getClass(element)

Gets css classes of the given element

Parameters

• element html element

Example

Dom.addClass(element|nodeList|Array, className)

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

Parameters

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

Example

Dom.hasClass(element, className)

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

Parameters

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

Example

Dom.removeClass(element|nodeList|Array, className)

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

Parameters

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

Example

Dom.create(html)

Creates and returns html element created from provided content

Parameters

• html html string

Example

Dom.copy(element)

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

Parameters

• element html element

Example

Dom.html(element html)

Gets or sets inner html of HTMLElement

Parameters

• element html element
• html html string

Example

Dom.text(element, text)

Gets or sets text value of the HTML element

Parameters

• element html element
• text text string

Example

Dom.append(element, html)

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

Parameters

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

Example

Dom.prepend(element, html)

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

Parameters

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

Example

Dom.after(element, html)

Inserts content specified by the html argument after the HTMLElement

Parameters

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

Example

Dom.before(element, html)

Inserts content specified by the html argument before the HTMLElement

Parameters

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

Example

Dom.replace(element, html)

Replaces given html element with content specified in html parameter

Parameters

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

Example

Dom.remove(element)

Removes HTMLElement from dom tree

Parameters

• element html element that will be removed

Example

Parameters

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

Example

Dom.template(tpl, hash)

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

Parameters

• tpl micro template string
• hash hash object

Example

Dom.draggable(element, options)

Makes html element draggable.

Parameters

• element html element
• options options hash

Options

• 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]

Example

Dom.requestAnimationFrame(callback)

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

Dom.cancelAnimationFrame(id)

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

Dom.isElement(object)

Checks if given object is a DOMElement.

Parameters

• object input object

Dom.isNode(object)

Checks if given object is a DOMNode.

Parameters

• object input object

Dom.addListener (element|nodeList|Array, event, listener)

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

Parameters

• 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.

Example

Dom.removeListener (element|nodeList|Array, event, listener)

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

Parameters

• 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.dispatch (element|nodeList|Array, event, options)

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

Parameters

• 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.)

Dom.hasListener (element, event, listener)

Determine whether a supplied listener is attached to the element

Parameters

• 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

Mouse 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.

Form Events

#####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.

Keyboard Events

#####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 Events

#####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).

UI Events

#####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.