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:

- ui/DefaultDOMElement
- ui/VirtualElement
- ui/Component

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:

- ui/DOMElement#is()
- ui/DOMElement#find()
- ui/DOMElement#findAll()

this.getNativeElement()
Method defined in ui/DOMElement.js#83
Returns

| the native element

this.hasClass(className)
Method defined in ui/DOMElement.js#94

Checks if a CSS class is set.

Parameters

className | String |

Returns

Boolean | true if the CSS class is set

this.addClass(classString)
Method defined in ui/DOMElement.js#105

Adds a CSS class.

Parameters

classString | String | A space-separated string with CSS classes

Returns

this |

this.removeClass(classString)
Method defined in ui/DOMElement.js#116

Removes a CSS class.

Parameters

classString | String | A space-separated string with CSS classes

Returns

this |

this.attr(name, value)
Method defined in ui/DOMElement.js#128

jQuery style getter and setter for attributes.

Parameters

name | String |
[value] | String | if present the attribute will be set

Returns

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

this.removeAttr(name)
Method defined in ui/DOMElement.js#150

Removes an attribute.

Parameters

name | String |

Returns

this |

this.getAttribute()
Method defined in ui/DOMElement.js#168

Get the attribute with a given name.

Returns

String | the attribute's value.

this.setAttribute(the)
Method defined in ui/DOMElement.js#179

Set the attribute with a given name.

Parameters

the | String | attribute's value.

Returns

this |

this.htmlProp(name, value)
Method defined in ui/DOMElement.js#199

jQuery style getter and setter for HTML element properties.

Parameters

name | String |
[value] | String | if present the property will be set

Returns

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

this.getTagName()
Method defined in ui/DOMElement.js#234

Get the tagName of this element.

Returns

String | the tag name in lower-case.

this.setTagName(tagName)
Method defined in ui/DOMElement.js#247

Set the tagName of this element.

Parameters

tagName | String | the new tag name

Returns

this |

this.getId()
Method defined in ui/DOMElement.js#259

Get the id of this element.

Returns

String | the id.

this.setId(id)
Method defined in ui/DOMElement.js#272

Set the id of this element.

Parameters

id | String | the new id

Returns

this |

this.val(value)
Method defined in ui/DOMElement.js#283

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

this.css(name, value)
Method defined in ui/DOMElement.js#307

jQuery style method to set or get inline CSS styles.

Parameters

name | String | the style name
[value] | String | the style value

Returns

String|this | the style value or this if used as a setter

this.text(text)
Method defined in ui/DOMElement.js#341

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

this.getTextContent()
Method defined in ui/DOMElement.js#358

Get the textContent of this element.

Returns

String |

this.setTextContent(text)
Method defined in ui/DOMElement.js#371

Set the textContent of this element.

Parameters

text | String | the new text content

Returns

this |

this.html(html)
Method defined in ui/DOMElement.js#382

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

this.getInnerHTML()
Method defined in ui/DOMElement.js#399

Get the innerHTML of this element.

Returns

String |

this.setInnerHTML(text)
Method defined in ui/DOMElement.js#412

Set the innerHTML of this element.

Parameters

text | String | the new text content

Returns

this |

this.getOuterHTML()
Method defined in ui/DOMElement.js#424

Get the outerHTML of this element.

Returns

String |

this.on(event, handler, context, options)
Method defined in ui/DOMElement.js#439

Registers an Element event handler.

Parameters

event | String | The event name.
handler | Function | 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 |

this.off(event)
Method defined in ui/DOMElement.js#463

Unregisters the handler of a given event.

Parameters

event | String | The event name.

Returns

this |

this.getNodeType()
Method defined in ui/DOMElement.js#497

Gets the type of this element in lower-case.

Returns

String |

this.getChildNodes()
Method defined in ui/DOMElement.js#525

Get child nodes of this element.

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

Returns

Array.<ui/DOMElement> |

this.getChildren()
Method defined in ui/DOMElement.js#539

Get child elements of this element.

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

Returns

Array.<ui/DOMElement> |

this.isTextNode()
Method defined in ui/DOMElement.js#577

Checks if the element is a TextNode.

Returns

Boolean | true if the element is of type `Node.TEXT_NODE`

this.isElementNode()
Method defined in ui/DOMElement.js#587

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`

this.isCommentNode()
Method defined in ui/DOMElement.js#597

Checks if the element is a CommentNode.

Returns

Boolean | true if the element is of type `Node.COMMENT_NODE`

this.isDocumentNode()
Method defined in ui/DOMElement.js#607

Checks if the element is a DocumentNode.

Returns

Boolean | true if the element is of type `Node.DOCUMENT_NODE`

this.clone()
Method defined in ui/DOMElement.js#617

Creates a clone of the current element.

Returns

ui/DOMElement | A clone of this element.

this.createElement(str)
Method defined in ui/DOMElement.js#627

Creates a DOMElement.

Parameters

str | String | a tag name or an HTML element as string.

Returns

ui/DOMElement |

this.is(cssSelector)
Method defined in ui/DOMElement.js#646

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

cssSelector | String |

Returns

Boolean |

this.getParent()
Method defined in ui/DOMElement.js#656

Get the parent element of this element.

Returns

ui/DOMElement | the parent element

this.getRoot()
Method defined in ui/DOMElement.js#668

Get the root ancestor element of this element.

In the browser this is the `window.document`.

Returns

ui/DOMElement | the root element

this.find(cssSelector)
Method defined in ui/DOMElement.js#684

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

cssSelector | String |

Returns

ui/DOMElement | found element

this.findAll(cssSelector)
Method defined in ui/DOMElement.js#699

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

cssSelector | String |

Returns

Array.<ui/DOMElement> | found elements

this.append(child)
Method defined in ui/DOMElement.js#710

Append a child element.

Parameters

child | DOMElement|String | An element or text to append

Returns

this |

this.insertAt(pos, child)
Method defined in ui/DOMElement.js#740

Insert a child element at a given position.

Parameters

pos | Number | insert position
child | DOMElement|String | The child element or text to insert.

Returns

this |

this.removeAt(pos)
Method defined in ui/DOMElement.js#755

Remove the child at a given position.

Parameters

pos | Number |

Returns

this |

this.remove()
Method defined in ui/DOMElement.js#773

Removes this element from its parent.

Returns

this |

this.empty()
Method defined in ui/DOMElement.js#786

Removes all child nodes from this element.

Returns

this |

this.focus()
Method defined in ui/DOMElement.js#804

Focusses this element.

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

this.blur()
Method defined in ui/DOMElement.js#811

Blur this element.

this.click()
Method defined in ui/DOMElement.js#818

Trigger a click event on this element.

this.getOuterHeight()
Method defined in ui/DOMElement.js#835

Outer height as provided by $.outerHeight(withMargin)

this.getOffset()
Method defined in ui/DOMElement.js#842

Offset values as provided by $.offset()

this.getPosition()
Method defined in ui/DOMElement.js#849

Position values as provided by $.position()

this.getElementFactory()
Method defined in ui/DOMElement.js#861

Get element factory conveniently

Example

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