Batman includes some helper methods to assist in DOM manipulation.

The following are included in the platform adapters: - querySelector - querySelectorAll - destroyNode - setInnerHTML - textContent - addEventListener - removeEventListener

  • @scrollIntoView(elementID : string)

    Scrolls the desired element into view. If the element isn't there or doesn't have a scrollIntoView method this will fail silently.

  • @setStyleProperty(node : Node, property : string,value : string, importance : string)

    Sets the style property or attribute on the supplied node. This method will prefer setProperty over setAttribute.

    test "setStyleProperty", ->
      node = document.createElement('div')
      Batman.DOM.setStyleProperty( node, "color", "white", "important")
      equal"color"), "white"
      equal "important","color")
  • @valueForNode(node: Node [, value = '', escapeValue = true ]) : string

    Gets the value of a node and optionally sets it as well. escapeValue will escape the value via Batman.escapeHTML

    test 'valueForNode', ->
      node = document.createElement('input')
      val = Batman.DOM.valueForNode(node, 'stuff' )
      equal val, "stuff"
      equal node.value, "stuff"
  • @nodeIsEditable(node) : boolean

    Returns whether a node is editable or not.

    test 'nodeIsEditable', ->
      node = document.createElement('div')
      ok !Batman.DOM.nodeIsEditable(node)
      node = document.createElement('input')
      ok Batman.DOM.nodeIsEditable(node)
  • @addEventListener(node : Node, eventName : string, callback : function)

    Adds the event listener, uses the platform addEventListener if available otherwise use attachEvent on{eventName} Batman stores the listeners internally.

  • @removeEventListener(node : Node, eventName : string, callback : function)

    Removes the event listener from the node and removes any internal references to it.

  • @cleanupNode(node : Node)

    Removes all the event listeners from the specified node and any child nodes.

  • .hasAddEventListener : boolean

    Returns the whether the window object contains addEventListener.

    test "does the window have an event listener", ->
      ok Batman.DOM.hasAddEventListener
  • @preventDefault(e : Event)

    Prevents the default event from happening. If preventDefault isn't a function then it will set the returnValue to false

    test "preventDefault", ->
      e = { returnValue: true }
      ok !e.returnValue
      e = { preventDefault: -> ok true }
  • @stopPropagation(e : Event)

    Stops the event from propogating. If the stopPropgation isn't a function then it will set cancelBubble to true

    test "stopPropagation", ->
      e = { cancelBubble: false }
      ok e.cancelBubble
      e = {stopPropagation: -> ok true }

    The following methods are only available with the jQuery platform or a polyfill

  • @querySelectorAll(node : Node, selector : string)

    Performs a jQuery like selector depending on your platform

  • @querySelector(node : Node, selector : string)

    Performs a jQuery like selector that returns one element

  • @destroyNode(node : Node)

    Calls Batman.DOM.cleanupNode and removes node and anything inside from the document tree.

    test 'destroyNode', ->
      node1 = document.createElement('div')
      node2 = document.createElement('div')
      node3 = document.createElement('div')
      Batman.DOM.destroyNode( node1 )
      equal node1.childNodes.length, 1
  • @setInnerHtml(node : Node, html : string)

    Set an element's content and any content that was in that element is completely replaced by the new content. note this can't be used on XML documents.

    test "innerHTML", ->
      node = document.createElement('div')
      Batman.DOM.setInnerHTML(node, "FOO")
      equal node.innerHTML, "FOO"
  • @textContent(node) : string

    Returns the string of the text contained in the node.

    test "textContent", ->
      node = document.createElement('div')
      content = document.createTextNode("FOO")
      equal Batman.DOM.textContent(node), "FOO"