# Class Dom

This is essentially a helper class for dom manipulation.
This is intended to provide some basic functionality normally offered by jQuery.
To minimize the multiple jQuery conflict we have while integrating in various system, we implemented the very small subset that the framework needs.
See $$, which is a function that wraps this class constructor, for less verbose code.

## Index

### Methods

- addClass
- append
- canHandleEvent
- children
- clone
- closest
- css
- detach
- empty
- find
- findAll
- findClass
- findId
- focus
- getAttribute
- getClass
- hasClass
- height
- hide
- insertAfter
- insertBefore
- is
- isDescendant
- isEmpty
- isValid
- isVisible
- off
- offset
- offsetParent
- on
- one
- parent
- parents
- position
- prepend
- remove
- removeClass
- replaceWith
- setAttribute
- setHtml
- show
- siblings
- text
- toggle
- toggleClass
- trigger
- unhide
- width
- createElement
- nodeListToArray

### Properties

- useNativeJavaScriptEvents

### Constructors

- constructor

## Methods

### addClass

- addClass(classNames: string[]): void

- - Defined in utils/Dom.ts :408

  Add a class to the element. Takes care of not adding the same class if the element already has it.

  #### Parameters

  - ##### classNames: string[]

  #### Returns void

### append

- append(element: HTMLElement): void

- - Defined in utils/Dom.ts :80

  Adds the element to the children of the current element

  #### Parameters

  - ##### element: HTMLElement

    The element to append

  #### Returns void

### canHandleEvent

- canHandleEvent(eventName: string): boolean

- - Defined in utils/Dom.ts :775

  Determine if an element support a particular native DOM event.

  #### Parameters

  - ##### eventName: string

    The event to evaluate. Eg: touchstart, touchend, click, scroll.

  #### Returns boolean

### children

- children(): HTMLElement[]

- - Defined in utils/Dom.ts :344

  Return all children

  #### Returns HTMLElement[]

### clone

- clone(deep?: boolean): Dom

- - Defined in utils/Dom.ts :767

  Clone the node

  #### Parameters

  - ##### Default value deep: boolean = false

    true if the children of the node should also be cloned, or false to clone only the specified node.

  #### Returns Dom

### closest

- closest(className: string): HTMLElement

- - Defined in utils/Dom.ts :306

  Get the first element that matches the classname by testing the element itself and traversing up through its ancestors in the DOM tree.

  Stops at the body of the document

  #### Parameters

  - ##### className: string

    A CSS classname

  #### Returns HTMLElement

### css

- css(property: string): string

- - Defined in utils/Dom.ts :89

  Get the css value of the specified property.

  #### Parameters

  - ##### property: string

    The property

  #### Returns string

### detach

- detach(): void

- - Defined in utils/Dom.ts :489

  Detach the element from the DOM.

  #### Returns void

### empty

- empty(): void

- - Defined in utils/Dom.ts :147

  Empty (remove all child) from the element;

  #### Returns void

### find

- find(selector: string): HTMLElement

- - Defined in utils/Dom.ts :272

  Find a child element, given a CSS selector

  #### Parameters

  - ##### selector: string

    A CSS selector, can be a .className or #id

  #### Returns HTMLElement

### findAll

- findAll(selector: string): HTMLElement[]

- - Defined in utils/Dom.ts :380

  Find all children that match the given CSS selector

  #### Parameters

  - ##### selector: string

    A CSS selector, can be a .className

  #### Returns HTMLElement[]

### findClass

- findClass(className: string): HTMLElement[]

- - Defined in utils/Dom.ts :389

  Find the child elements using a className

  #### Parameters

  - ##### className: string

    Class of the childs elements to find

  #### Returns HTMLElement[]

### findId

- findId(id: string): HTMLElement

- - Defined in utils/Dom.ts :400

  Find an element using an ID

  #### Parameters

  - ##### id: string

    ID of the element to find

  #### Returns HTMLElement

### focus

- focus(preserveScroll: boolean): void

- - Defined in utils/Dom.ts :132

  Focuses on an element.

  #### Parameters

  - ##### preserveScroll: boolean

    Whether or not to scroll the page to the focused element.

  #### Returns void

### getAttribute

- getAttribute(name: string): string

- - Defined in utils/Dom.ts :254

  Returns the value of the specified attribute.

  #### Parameters

  - ##### name: string

    The name of the attribute

  #### Returns string

### getClass

- getClass(): string[]

- - Defined in utils/Dom.ts :467

  Return an array with all the classname on the element. Empty array if the element has not classname

  #### Returns string[]

### hasClass

- hasClass(className: string): boolean

- - Defined in utils/Dom.ts :482

  Check if the element has the given class name

  #### Parameters

  - ##### className: string

    Classname to verify

  #### Returns boolean

### height

- height(): number

- - Defined in utils/Dom.ts :758

  Returns the offset height of the element

  #### Returns number

### hide

- hide(): void

- - Defined in utils/Dom.ts :187

  Hide the element;

  #### Returns void

### insertAfter

- insertAfter(refNode: HTMLElement): void

- - Defined in utils/Dom.ts :497

  Insert the current node after the given reference node

  #### Parameters

  - ##### refNode: HTMLElement

  #### Returns void

### insertBefore

- insertBefore(refNode: HTMLElement): void

- - Defined in utils/Dom.ts :505

  Insert the current node before the given reference node

  #### Parameters

  - ##### refNode: HTMLElement

  #### Returns void

### is

- is(selector: string): boolean

- - Defined in utils/Dom.ts :281

  Check if the element match the selector.
  The selector can be a class, an id or a tag.
  Eg : .is('.foo') or .is('#foo') or .is('div').

  #### Parameters

  - ##### selector: string

  #### Returns boolean

### isDescendant

- isDescendant(parent: HTMLElement): boolean

- - Defined in utils/Dom.ts :648

  Check if the element is a descendant of parent

  #### Parameters

  - ##### parent: HTMLElement

  #### Returns boolean

### isEmpty

- isEmpty(): boolean

- - Defined in utils/Dom.ts :632

  Check if the element is "empty" (has no innerHTML content). Whitespace is considered empty

  #### Returns boolean

### isValid

- isValid(): boolean

- - Defined in utils/Dom.ts :640

  Check if the element is not a locked node (`{ toString(): string }`) and thus have base element properties.

  #### Returns boolean

### isVisible

- isVisible(): boolean

- - Defined in utils/Dom.ts :226

  Tries to determine if an element is "visible", in a generic manner.

  This is not meant to be a "foolproof" method, but only a superficial "best effort" detection is performed.

  #### Returns boolean

### off

- off(types: string[], eventHandle: function): void

- - Defined in utils/Dom.ts :584

  Remove an event handler on the element. Accepts either one (a string) or multiple (Array) event type.

  #### Parameters

  - ##### types: string[]

    The {string} or {Array} of types on which to remove an event handler

  - ##### eventHandle: function

    The function to remove on the element

    - - (evt: Event, arg?: any): void

      - #### Parameters

        - ##### evt: Event

        - ##### Optional arg: any

        #### Returns void

### offset

- offset(): IOffset

- - Defined in utils/Dom.ts :728

  Return the position relative to the document.

  #### Returns IOffset

### offsetParent

- offsetParent(): HTMLElement

- - Defined in utils/Dom.ts :710

  Returns the offset parent. The offset parent is the closest parent that is positioned. An element is positioned when its position property is not 'static', which is the default.

  #### Returns HTMLElement

### on

- on(types: string[], eventHandle: function): void

- - Defined in utils/Dom.ts :526

  Bind an event handler on the element. Accepts either one (a string) or multiple (Array) event type.

  #### Parameters

  - ##### types: string[]

    The {string} or {Array} of types on which to bind an event handler

  - ##### eventHandle: function

    The function to execute when the event is triggered

    - - (evt: Event, data: any): void

      - #### Parameters

        - ##### evt: Event

        - ##### data: any

        #### Returns void

### one

- one(types: string[], eventHandle: function): void

- - Defined in utils/Dom.ts :562

  Bind an event handler on the element. Accepts either one (a string) or multiple (Array) event type.
  The event handler will execute only ONE time.

  #### Parameters

  - ##### types: string[]

    The {string} or {Array} of types on which to bind an event handler

  - ##### eventHandle: function

    The function to execute when the event is triggered

    - - (evt: Event, args?: any): void

      - #### Parameters

        - ##### evt: Event

        - ##### Optional args: any

        #### Returns void

### parent

- parent(className: string): HTMLElement

- - Defined in utils/Dom.ts :316

  Get the first element that matches the classname by testing the element itself and traversing up through its ancestors in the DOM tree.

  Stops at the body of the document

  #### Parameters

  - ##### className: string

  #### Returns HTMLElement

### parents

- parents(className: string): HTMLElement[]

- - Defined in utils/Dom.ts :330

  Get all the ancestors of the current element that match the given className

  Return an empty array if none found.

  #### Parameters

  - ##### className: string

  #### Returns HTMLElement[]

### position

- position(): IOffset

- - Defined in utils/Dom.ts :675

  Return the position relative to the offset parent.

  #### Returns IOffset

### prepend

- prepend(toPrepend: HTMLElement): void

- - Defined in utils/Dom.ts :513

  Insert the given node as the first child of the current node

  #### Parameters

  - ##### toPrepend: HTMLElement

  #### Returns void

### remove

- remove(): void

- - Defined in utils/Dom.ts :170

  Empty the element and all childs from the dom;

  #### Returns void

### removeClass

- removeClass(className: string): void

- - Defined in utils/Dom.ts :430

  Remove the class on the element. Works even if the element does not possess the class.

  #### Parameters

  - ##### className: string

    Classname to remove on the the element

  #### Returns void

### replaceWith

- replaceWith(otherElem: HTMLElement): void

- - Defined in utils/Dom.ts :663

  Replace the current element with the other element, then detach the current element

  #### Parameters

  - ##### otherElem: HTMLElement

  #### Returns void

### setAttribute

- setAttribute(name: string, value: string): void

- - Defined in utils/Dom.ts :263

  Sets the value of the specified attribute.

  #### Parameters

  - ##### name: string

    The name of the attribute

  - ##### value: string

    The value to set

  #### Returns void

### setHtml

- setHtml(html: string): void

- - Defined in utils/Dom.ts :459

  Sets the inner html of the element

  #### Parameters

  - ##### html: string

    The html to set

  #### Returns void

### show

- show(): void

- - Defined in utils/Dom.ts :179

  Show the element by setting display to block;

  #### Returns void

### siblings

- siblings(selector: string): HTMLElement[]

- - Defined in utils/Dom.ts :352

  Return all siblings

  #### Parameters

  - ##### selector: string

  #### Returns HTMLElement[]

### text

- text(txt?: string): string

- - Defined in utils/Dom.ts :101

  Get or set the text content of the HTMLElement.

  #### Parameters

  - ##### Optional txt: string

    Optional. If given, this will set the text content of the element. If not, will return the text content.

  #### Returns string

### toggle

- toggle(visible?: boolean): void

- - Defined in utils/Dom.ts :205

  Toggle the element visibility.
  Optional visible parameter, if specified will set the element visibility

  #### Parameters

  - ##### Optional visible: boolean

    Optional parameter to display or hide the element

  #### Returns void

### toggleClass

- toggleClass(className: string, swtch?: boolean): void

- - Defined in utils/Dom.ts :439

  Toggle the class on the element.

  #### Parameters

  - ##### className: string

    Classname to toggle

  - ##### Optional swtch: boolean

    If true, add the class regardless and if false, remove the class

  #### Returns void

### trigger

- trigger(type: string, data?: object): void

- - Defined in utils/Dom.ts :612

  Trigger an event on the element.

  #### Parameters

  - ##### type: string

    The event type to trigger

  - ##### Optional data: object

    - ##### [key: string]: any

  #### Returns void

### unhide

- unhide(): void

- - Defined in utils/Dom.ts :195

  Show the element by setting display to an empty string.

  #### Returns void

### width

- width(): number

- - Defined in utils/Dom.ts :751

  Returns the offset width of the element

  #### Returns number

### Static createElement

- createElement(type: string, props?: Object, ...children: Array<string | HTMLElement | Dom>): HTMLElement

- - Defined in utils/Dom.ts :50

  Helper function to quickly create an HTMLElement

  #### Parameters

  - ##### type: string

    The type of the element (e.g. div, span)

  - ##### Optional props: Object

    The props (id, className, attributes) of the element
    Can be either specified in dashed-case strings ('my-attribute') or camelCased keys (myAttribute), the latter of which will automatically get replaced to dash-case.

  - ##### Rest ...children: Array<string | HTMLElement | Dom>

  #### Returns HTMLElement

### Static nodeListToArray

- nodeListToArray(nodeList: NodeList): HTMLElement[]

- - Defined in utils/Dom.ts :119

  Performant way to transform a NodeList to an array of HTMLElement, for manipulation
  http://jsperf.com/nodelist-to-array/72

  #### Parameters

  - ##### nodeList: NodeList

    a {NodeList} to convert to an array

  #### Returns HTMLElement[]

## Properties

### Static useNativeJavaScriptEvents

useNativeJavaScriptEvents: boolean

- Defined in utils/Dom.ts :27

Whether to always register, remove, and trigger events using standard JavaScript rather than attempting to use jQuery first.

type

  boolean

## Constructors

### constructor

- new Dom(el: HTMLElement): Dom

- - Defined in utils/Dom.ts :29

  Create a new Dom object with the given HTMLElement

  #### Parameters

  - ##### el: HTMLElement

    The HTMLElement to wrap in a Dom object

  #### Returns Dom

### Hierarchy

- Dom