API Docs for:
Show:

ElementWrapper Class

Defined in: latest/events.js:234
Module: DOM
Parent Module: JSFramework

Class that wraps DOM elements and provides additional functionality. Should not be constructed directly - Instead use wrap or create

Constructor

ElementWrapper

()

Defined in latest/events.js:234

Methods

_getByClass

(
  • el
  • className
)
Array of HTMLElement private

Defined in latest/dom.js:380

Internal function for getting elements by class name. Don't use externally (use getByClass instead)

Parameters:

  • el HTMLElement

    Element to search the children of

  • className String

    Name of the class to search for

Returns:

Array of HTMLElement: The matching elements

addClass

(
  • name
)
chainable

Defined in latest/dom.js:287

Add the specified class name to this element

Parameters:

  • name String

    Class name to add

addDelegate

(
  • type
  • tagName
  • className
  • fn
)
chainable

Defined in latest/events.js:252

Add a delegated event handler to this element. Attach a handler to all tagNames with a class of className, by attaching the event listener to "this" element. Works for both current elements, and new elements added in the future.

Parameters:

  • type String

    Type of event listener (eg. "click")

  • tagName String

    Tag name to add events to (eg. "a")

  • className String

    Class name to add events to, or null for none

  • fn String

    Event handler function

addEvent

(
  • type
  • fn
)
chainable

Defined in latest/events.js:239

Add an event handler to this element.

Parameters:

  • type String

    Type of event handler (eg. "click")

  • fn Function

    Function for handling these events

append

(
  • html
)
chainable

Defined in latest/dom.js:197

Append some HTML to the element

Parameters:

  • html String

    HTML to append

Example:

$('container').append('<p>More content</p>');

appendChild

(
  • newNode
)
chainable

Defined in latest/dom.js:624

Append a new child to the end of this element

Parameters:

children

() Array of ElementWrapper

Defined in latest/dom.js:467

Get all the children of this element

Returns:

Array of ElementWrapper: The children

cloneNode

(
  • deep
)
ElementWrapper

Defined in latest/dom.js:590

Clone this element

Parameters:

  • deep Boolean

    Whether to perform a deep clone

Returns:

ElementWrapper: The cloned node

firstByClass

(
  • className
  • [wrap=true]
)
ElementWrapper | HTMLElement

Defined in latest/dom.js:348

Get the first child element by class name, or null if there is no matching child

Parameters:

  • className String

    Class name to look for

  • [wrap=true] Boolean optional

    Whether to wrap the element or not. Optional, default is true

Returns:

ElementWrapper | HTMLElement: The element, or a wrapper around it if wrap is true.

firstBySelector

(
  • selectors
  • [wrap=true]
)

Defined in latest/dom.js:428

Get the first child element by a selector or null if there is no matching child. Incomplete as there's not yet full IE support.

Parameters:

  • selectors String

    Selector to use

  • [wrap=true] Boolean optional

    Whether to wrap the elements or not. Optional, default is true

Returns:

The element, or a wrapper around it if wrap is true.

firstByTag

(
  • tag
  • [wrap=true]
)
ElementWrapper | HTMLElement

Defined in latest/dom.js:316

Get the first child element by tag name, or null if there is no matching child

Parameters:

  • tag String

    Tag name to get

  • [wrap=true] Boolean optional

    Whether to wrap the element or not. Optional, default is true

Returns:

ElementWrapper | HTMLElement: The element, or a wrapper around it if wrap is true.

get

(
  • key
)
String

Defined in latest/dom.js:169

Get a property on this element

Parameters:

  • key String

    Property name

Returns:

String: Property value

getAttribute

(
  • attribute
)
Mixed

Defined in latest/dom.js:614

Get the value of the specified attribute

Parameters:

  • attribute String

    Attribute to get

Returns:

Mixed: Attribute's value

getByClass

(
  • className
  • [wrap=true]
)
Array of ElementWrapper | Array of HTMLElement

Defined in latest/dom.js:364

Get all children by class name

Parameters:

  • className String

    Class name to look for

  • [wrap=true] Boolean optional

    Whether to wrap the elements or not. Optional, default is true

Returns:

Array of ElementWrapper | Array of HTMLElement: The elements, or wrappers around them if wrap is true.

getBySelector

(
  • selectors
  • [wrap=true]
)
Array of ElementWrapper | Array of HTMLElement

Defined in latest/dom.js:447

Get all children by selector. Incomplete as there's not yet full IE support.

Parameters:

  • selectors String

    Selector to use

  • [wrap=true] Boolean optional

    Whether to wrap the elements or not. Optional, default is true

Returns:

Array of ElementWrapper | Array of HTMLElement: The elements, or wrappers around them if wrap is true.

getByTag

(
  • tag
  • [wrap=true]
)
Array of ElementWrapper | Array of HTMLElement

Defined in latest/dom.js:332

Get all children by tag name

Parameters:

  • tag String

    Tag name to get

  • [wrap=true] Boolean optional

    Whether to wrap the elements or not. Optional, default is true

Returns:

Array of ElementWrapper | Array of HTMLElement: The elements, or wrappers around them if wrap is true.

getElementId

() String

Defined in latest/dom.js:143

Gets the internal element ID for this element. This is not the id in the HTML!

Returns:

String: The element ID

getPosition

() Object

Defined in latest/dom.js:216

Get the position of this element

Returns:

Object: X and Y values

hasClass

(
  • name
)
Boolean

Defined in latest/dom.js:272

Check if this element has the specified CSS class name

Parameters:

  • name String

    Class name to look for

Returns:

Boolean: Whether this element has this class name as one of its classes

Example:

// HTML contains: <div id="test" class="hello">...</div>
$('test').hasClass('blah'); // false
$('test').hasClass('hello'); // true

insertAfter

(
  • Wrapped
)
chainable

Defined in latest/dom.js:180

Insert a DOM node after this node

Parameters:

Example:

// Insert a new element after #container
var containerEl = $('container');
var newEl = DOM.create('div', { id: 'helloWorld' });
containerEl.insertAfter(newEl);

next

() ElementWrapper

Defined in latest/dom.js:529

Get the sibling element after this one

Returns:

ElementWrapper: The next element, or null if there's none.

parent

(
  • [tagName=null]
)
ElementWrapper

Defined in latest/dom.js:477

Get the parent element of this element. If a tag name is passed, get the first parent that matches this tag name, traversing the tree

Parameters:

  • [tagName=null] String optional

    Name of tag to look for, or null to just get the first ancestor

Returns:

ElementWrapper: The parent element

prependChild

(
  • New
)
chainable

Defined in latest/dom.js:575

Add a child to the start of this element

Parameters:

previous

() ElementWrapper

Defined in latest/dom.js:497

Get the sibling element before this one

Returns:

ElementWrapper: The previous element, or null if there's none.

remove

()

Defined in latest/dom.js:561

Remove this element from the DOM.

removeChild

(
  • node
)
chainable

Defined in latest/dom.js:639

Remove the specified child from this element

Parameters:

removeClass

(
  • name
)
chainable

Defined in latest/dom.js:299

Remove the specified class name from this element

Parameters:

  • name String

    Class name to remove

set

(
  • key
  • value
)
chainable

Defined in latest/dom.js:153

Set a property on this element

Parameters:

  • key String

    Property name

  • value String

    Value to set

Example:

var containerEl = $('container');
containerEl.set('id', 'foobar'); // Changes ID of #container

setAttribute

(
  • attribute
  • value
)
chainable

Defined in latest/dom.js:602

Set the value of the specified attribute

Parameters:

  • attribute String

    Attribute to set

  • value Mixed

    Value to set attribute to

setStyle

(
  • style
  • value
)
chainable

Defined in latest/dom.js:236

Set a CSS style on this element

Parameters:

  • style String

    Style to set

  • value Mixed

    New style value

Example:

$('container').setStyle('backgroundColor', 'red');

setStyles

(
  • styles
)
chainable

Defined in latest/dom.js:252

Set multiple CSS styles at once

Parameters:

  • styles Object

    Styles to set

Example:

$('container').setStyles({
    backgroundColor: red,
    fontSize: '18px'
});

Properties

element

HTMLElement private

Defined in latest/dom.js:133

The element being wrapped