DOMElement
Abstract Class defined in ui/DOMElement.js#28

A unified interface for DOM elements used by Substance.

There are three different implementations of this interface:

Methods which rely on a CSS selector implementation are only available for ui/DefaultDOMElement instance, which is used during DOM import. I.e., don't use the following methods in Component renderers:

Returns

the native element

Checks if a CSS class is set.

Parameters
classNameString
Returns
Boolean

true if the CSS class is set

Adds a CSS class.

Parameters
classStringString

A space-separated string with CSS classes

Returns
this

Removes a CSS class.

Parameters
classStringString

A space-separated string with CSS classes

Returns
this

jQuery style getter and setter for attributes.

Parameters
nameString
[value]String

if present the attribute will be set

Returns
String|this

if used as getter the attribute value, otherwise this element for chaining

Removes an attribute.

Parameters
nameString
Returns
this

Get the attribute with a given name.

Returns
String

the attribute's value.

Set the attribute with a given name.

Parameters
theString

attribute's value.

Returns
this

jQuery style getter and setter for HTML element properties.

Parameters
nameString
[value]String

if present the property will be set

Returns
String|this

if used as getter the property value, otherwise this element for chaining

Get the tagName of this element.

Returns
String

the tag name in lower-case.

Set the tagName of this element.

Parameters
tagNameString

the new tag name

Returns
this

Get the id of this element.

Returns
String

the id.

Set the id of this element.

Parameters
idString

the new id

Returns
this

jQuery style getter and setter for the value of an element.

Parameters
[value]String

The value to set.

Returns
String|this

the value if used as a getter, this otherwise

jQuery style method to set or get inline CSS styles.

Parameters
nameString

the style name

[value]String

the style value

Returns
String|this

the style value or this if used as a setter

Gets or sets the text content of an element.

Parameters
[text]String

The text content to set.

Returns
String|this

The text content if used as a getter, this otherwise

Get the textContent of this element.

Returns
String

Set the textContent of this element.

Parameters
textString

the new text content

Returns
this

jQuery style getter and setter for the innerHTML of an element.

Parameters
[html]String

The html to set.

Returns
String|this

the inner html if used as a getter, this otherwise

Get the innerHTML of this element.

Returns
String

Set the innerHTML of this element.

Parameters
textString

the new text content

Returns
this

Get the outerHTML of this element.

Returns
String

Registers an Element event handler.

Parameters
eventString

The event name.

handlerFunction

The handler function.

[context]Object

context where the function should be bound to

[options]Object
[options.selector]Object

for event delegation

[options.capture]Object

to register the event in the event's capture phase (bubbling top-down)

Returns
this

Unregisters the handler of a given event.

Parameters
eventString

The event name.

Returns
this

Gets the type of this element in lower-case.

Returns
String

Get child nodes of this element.

This method provides a new array with wrapped native elements. Better use getChildAt().

Returns
Array.

Get child elements of this element.

This method provides a new array with wrapped native elements. Better use getChildAt().

Returns
Array.

Checks if the element is a TextNode.

Returns
Boolean

true if the element is of type Node.TEXT_NODE

Checks if the element is actually an element as opposed to a node.

Returns
Boolean

true if the element is of type Node.ELEMENT_NODE

Checks if the element is a CommentNode.

Returns
Boolean

true if the element is of type Node.COMMENT_NODE

Checks if the element is a DocumentNode.

Returns
Boolean

true if the element is of type Node.DOCUMENT_NODE

Creates a clone of the current element.

Returns
ui/DOMElement

A clone of this element.

Creates a DOMElement.

Parameters
strString

a tag name or an HTML element as string.

Returns
ui/DOMElement

Checks if a given CSS selector matches for this element.

Attention This method is currently not implemented for {ui/VirtualElement}. This means you should use it only in importer implementations.

Parameters
cssSelectorString
Returns
Boolean

Get the parent element of this element.

Returns
ui/DOMElement

the parent element

Get the root ancestor element of this element.

In the browser this is the window.document.

Returns
ui/DOMElement

the root element

Find the first descendant element matching the given CSS selector. Note this differs from jQuery.find() that it returns only one element.

Attention This method is currently not implemented for {ui/VirtualElement}. This means you can use it only in importer implementations, but not in render or exporter implementations.

Parameters
cssSelectorString
Returns
ui/DOMElement

found element

Find all descendant elements matching the given CSS selector.

Attention This method is currently not implemented for {ui/VirtualElement}. This means you can use it only in importer implementations, but not in render or exporter implementations.

Parameters
cssSelectorString
Returns
Array.

found elements

Append a child element.

Parameters
childDOMElement|String

An element or text to append

Returns
this

Insert a child element at a given position.

Parameters
posNumber

insert position

childDOMElement|String

The child element or text to insert.

Returns
this

Remove the child at a given position.

Parameters
posNumber
Returns
this

Removes this element from its parent.

Returns
this

Removes all child nodes from this element.

Returns
this

Focusses this element.

Attention: this makes only sense for elements which are rendered in the browser

Blur this element.

Trigger a click event on this element.

Outer height as provided by $.outerHeight(withMargin)

Offset values as provided by $.offset()

Position values as provided by $.position()

Get element factory conveniently

Example

var $$ = el.getElementFactory() $$('div').append('bla')