Class CKFinder.dom.element

Extends CKFinder.dom.node.

Class Summary
Constructor Attributes	Constructor Name and Description
	CKFinder.dom.element(element, ownerDocument) Represents a DOM element.

Field Summary
Field Attributes	Field Name and Description
<static>	CKFinder.dom.element.getSize Get the element's size, possibly with box model awareness.
<static>	CKFinder.dom.element.setSize Update the element's size with box model awareness.
	hasAttributes Indicates that the element has defined attributes.
	type The node type.

Fields borrowed from class CKFinder.dom.domObject:: $

Method Summary
Method Attributes	Method Name and Description
	addClass(className) Adds a CSS class to the element.
	append(node, toStart) Append a node as a child of this element.
	appendHtml(html) Appends html to this element.
	appendText(text) Append text to this element.
	data(name, value) Gets, sets and removes custom data to be stored as HTML5 data-* attributes.
	focus() Moves the selection focus to this element.
	getAttribute(name) Gets the value of an element attribute.
	getChild(indices) Gets a DOM tree descendant under the current node.
	getFirst() Gets the first child node of this element.
	getHtml() Gets the inner HTML of this element.
	getId() Gets the value of the "id" attribute of this element.
	getName() Gets the element name (tag name).
	getNameAtt() Gets the value of the "name" attribute of this element.
	getSize(type, contentSize)
	getStyle(name)
	getTabIndex() Gets the computed tabindex for this element.
	getText() Gets the text value of this element.
	getValue() Gets the value set to this element.
	getWindow() Gets the window object that contains this element.
	hasAttribute((String)) Indicates whether a specified attribute is defined for this element.
	hasClass(className)
	hide() Hides this element (display:none).
	is() Checks if the element name matches one or more names.
	isIdentical(otherElement)
	isVisible() Checks if this element is visible.
	removeAttribute(name) Removes an attribute from the element.
	removeAttributes(attributes)
	removeClass(className) Removes a CSS class name from the elements classes.
	removeStyle(name) Removes a style from the element.
	renameNode(newTag) Changes the tag name of the current element.
	setAttribute(name, value) Sets the value of an element attribute.
	setAttributes(attributesPairs) Sets the value of several element attributes.
	setHtml(html) Sets the inner HTML of this element.
	setOpacity(opacity) Sets the opacity of an element.
	setSize(type, size, isBorderBox)
	setStyle(name, value) Sets the value of an element style.
	setStyles(stylesPairs) Sets the value of several element styles.
	setText(text) Sets the element contents as plain text.
	setValue(value) Sets the element value.
	show() Shows this element (display it).
	toString()

Methods borrowed from class CKFinder.dom.node:: appendTo, clone, getDocument, getParent, insertAfter, insertBefore, ltrim, move, remove, replace, rtrim, trim
Methods borrowed from class CKFinder.dom.domObject:: equals, getCustomData, setCustomData

Class Detail

CKFinder.dom.element(element, ownerDocument)

Since: 2.0

Represents a DOM element.

// Definition of a select element, see CKFinder.dialog.definition.select
{
	type : 'select',
	id : 'sport',
	label : 'Select your favourite sport',
	items : [ [ 'Basketball' ], [ 'Hockey' ] ],
	'default' : 'Hockey',
	onChange : function( api ) {
		// this = CKFinder.ui.dialog.select
		var element = this.getElement();
		// element = CKFinder.dom.element
		alert( element.getHtml() );
	}
}

Parameters:
{Object|String} element: A native DOM element or the element name for new elements.
{CKFinder.dom.document} ownerDocument Optional: The document that will contain the element in case of element creation.

Field Detail

<static> {Undefined} CKFinder.dom.element.getSize

Since: 2.0

Get the element's size, possibly with box model awareness.

NO EXAMPLE AVAILABLE

<static> {Undefined} CKFinder.dom.element.setSize

Since: 2.0

Update the element's size with box model awareness.

NO EXAMPLE AVAILABLE

{Function} hasAttributes

Since: 2.0

Indicates that the element has defined attributes.

var element = CKFinder.dom.element.createFromHtml( '<div title="Test">Example</div>' );
alert( element.hasAttributes() );  "true"

var element = CKFinder.dom.element.createFromHtml( '<div>Example</div>' );
alert( element.hasAttributes() );  "false"

{Number} type

Since: 2.0

The node type. This is a constant value set to CKFinder.NODE_ELEMENT.

Method Detail

{Undefined} addClass(className)

Since: 2.0

Adds a CSS class to the element. It appends the class to the already existing names.

var element = new CKFinder.dom.element( 'div' );
element.addClass( 'classA' );  // <div class="classA">
element.addClass( 'classB' );  // <div class="classA classB">
element.addClass( 'classA' );  // <div class="classA classB">

Parameters:
{String} className: The name of the class to be added.

{CKFinder.dom.node} append(node, toStart)

Since: 2.0

Append a node as a child of this element.

var p = new CKFinder.dom.element( 'p' );

var strong = new CKFinder.dom.element( 'strong' );
p.append( strong );

var em = p.append( 'em' );

// result: "<p><strong></strong><em></em></p>"

Parameters:
{CKFinder.dom.node|String} node: The node or element name to be appended.
{Boolean} toStart Optional: Indicates that the element is to be appended at the start.

Returns:: {CKFinder.dom.node} The appended node.

{Undefined} appendHtml(html)

Since: 2.0

Appends html to this element.

Parameters:
{String} html: The html to be appended.

{Undefined} appendText(text)

Since: 2.0

Append text to this element.

var p = new CKFinder.dom.element( 'p' );
p.appendText( 'This is' );
p.appendText( ' some text' );

// result: "<p>This is some text</p>"

Parameters:
{String} text: The text to be appended.

{Undefined} data(name, value)

Since: 2.0

Gets, sets and removes custom data to be stored as HTML5 data-* attributes.

element.data( 'extra-info', 'test' );   // appended the attribute data-extra-info="test" to the element
alert( element.data( 'extra-info' ) );  // "test"
element.data( 'extra-info', false );    // remove the data-extra-info attribute from the element

Parameters:
{String} name: The name of the attribute, excluding the 'data-' part.
{String} value Optional: The value to set. If set to false, the attribute will be removed.

{Undefined} focus()

Since: 2.0

Moves the selection focus to this element.

var element = CKFinder.document.getById( 'myTextarea' );
element.focus();

{String} getAttribute(name)

Since: 2.0

Gets the value of an element attribute.

var element = CKFinder.dom.element.createFromHtml( '<input type="text" />' );
alert( element.getAttribute( 'type' ) );  // "text"

Parameters:
{String} name: The attribute name.

Returns:: {String} The attribute value or null if not defined.

{CKFinder.dom.node} getChild(indices)

Since: 2.0

Gets a DOM tree descendant under the current node.

var strong = p.getChild(0);

Parameters:
{Array|Number} indices: The child index or array of child indices under the node.

Returns:: {CKFinder.dom.node} The specified DOM child under the current node. Null if child does not exist.

{CKFinder.dom.node} getFirst()

Since: 2.0

Gets the first child node of this element.

var element = CKFinder.dom.element.createFromHtml( '<div><b>Example</b></div>' );
var first = element.getFirst();
alert( first.getName() );  // "b"

Returns:: {CKFinder.dom.node} The first child node or null if not available.

{String} getHtml()

Since: 2.0

Gets the inner HTML of this element.

var element = CKFinder.dom.element.createFromHtml( '<div><b>Example</b></div>' );
alert( p.getHtml() );  // "<b>Example</b>"

Returns:: {String} The inner HTML of this element.

{String} getId()

Since: 2.0

Gets the value of the "id" attribute of this element.

var element = CKFinder.dom.element.createFromHtml( '<p id="myId"></p>' );
alert( element.getId() );  // "myId"

Returns:: {String} The element id, or null if not available.

{String} getName()

Since: 2.0

Gets the element name (tag name). The returned name is guaranteed to be always full lowercased.

var element = new CKFinder.dom.element( 'span' );
alert( element.getName() );  // "span"

Returns:: {String} The element name.

{String} getNameAtt()

Since: 2.0

Gets the value of the "name" attribute of this element.

var element = CKFinder.dom.element.createFromHtml( '<input name="myName"></input>' );
alert( element.getNameAtt() );  // "myName"

Returns:: {String} The element name, or null if not available.

{Undefined} getSize(type, contentSize)

Since: 2.0

NO EXAMPLE AVAILABLE

Parameters:
{Undefined} type
{Undefined} contentSize

{Undefined} getStyle(name)

Since: 2.0

NO EXAMPLE AVAILABLE

Parameters:
{Undefined} name

{Number} getTabIndex()

Since: 2.0

Gets the computed tabindex for this element.

var element = CKFinder.document.getById( 'myDiv' );
alert( element.getTabIndex() );  // e.g. "-1"

Returns:: {Number} The tabindex value.

{String} getText()

Since: 2.0

Gets the text value of this element. Only in IE (which uses innerText), <br> will cause linebreaks, and sucessive whitespaces (including line breaks) will be reduced to a single space. This behavior is ok for us, for now. It may change in the future.

var element = CKFinder.dom.element.createFromHtml( '<div>Same <i>text</i>.</div>' );
alert( element.getText() );  // "Sample text."

Returns:: {String} The text value.

{String} getValue()

Since: 2.0

Gets the value set to this element. This value is usually available for form field elements.

NO EXAMPLE AVAILABLE

Returns:: {String} The element value.

{CKFinder.dom.window} getWindow()

Since: 2.0

Gets the window object that contains this element.

Returns:: {CKFinder.dom.window} The window object.

{Boolean} hasAttribute((String))

Since: 2.0

Indicates whether a specified attribute is defined for this element.

Parameters:
{Undefined} (String): name The attribute name.

Returns:: {Boolean} True if the specified attribute is defined.

{Undefined} hasClass(className)

Since: 2.0

NO EXAMPLE AVAILABLE

Parameters:
{Undefined} className

{Undefined} hide()

Since: 2.0

Hides this element (display:none).

var element = CKFinder.dom.element.getById( 'myElement' );
element.hide();

{Boolean} is()

Since: 2.0

Checks if the element name matches one or more names.

var element = new CKFinder.element( 'span' );
alert( element.is( 'span' ) );  "true"
alert( element.is( 'p', 'span' ) );  "true"
alert( element.is( 'p' ) );  "false"
alert( element.is( 'p', 'div' ) );  "false"

Parameters:
{String} name[,name[,...]]: One or more names to be checked.

Returns:: {Boolean} true if the element name matches any of the names.

{Undefined} isIdentical(otherElement)

Since: 2.0

NO EXAMPLE AVAILABLE

Parameters:
{Undefined} otherElement

{Boolean} isVisible()

Since: 2.0

Checks if this element is visible. May not work if the element is child of an element with visibility set to "hidden", but works well on the great majority of cases.

NO EXAMPLE AVAILABLE

Returns:: {Boolean} True if the element is visible.

{Undefined} removeAttribute(name)

Since: 2.0

Removes an attribute from the element.

var element = CKFinder.dom.element.createFromHtml( '' );
element.removeAttribute( 'class' );

Parameters:
{String} name: The attribute name.

{Undefined} removeAttributes(attributes)

Since: 2.0

NO EXAMPLE AVAILABLE

Parameters:
{Undefined} attributes

{Undefined} removeClass(className)

Since: 2.0

Removes a CSS class name from the elements classes. Other classes remain untouched.

var element = new CKFinder.dom.element( 'div' );
element.addClass( 'classA' );  // <div class="classA">
element.addClass( 'classB' );  // <div class="classA classB">
element.removeClass( 'classA' );  // <div class="classB">
element.removeClass( 'classB' );  // <div>

Parameters:
{String} className: The name of the class to remove.

{Undefined} removeStyle(name)

Since: 2.0

Removes a style from the element.

var element = CKFinder.dom.element.createFromHtml( '<div style="display:none"></div>' );
element.removeStyle( 'display' );

Parameters:
{String} name: The style name.

{Undefined} renameNode(newTag)

Since: 2.0

Changes the tag name of the current element.

NO EXAMPLE AVAILABLE

Parameters:
{String} newTag: The new tag for the element.

{CKFinder.dom.element} setAttribute(name, value)

Since: 2.0

Sets the value of an element attribute.

var element = CKFinder.dom.element.getById( 'myElement' );
element.setAttribute( 'class', 'myClass' );
element.setAttribute( 'title', 'This is an example' );

Parameters:
{String} name: The name of the attribute.
{String} value: The value to be set to the attribute.

Returns:: {CKFinder.dom.element} This element instance.

{CKFinder.dom.element} setAttributes(attributesPairs)

Since: 2.0

Sets the value of several element attributes.

var element = CKFinder.dom.element.getById( 'myElement' );
element.setAttributes({
    'class' : 'myClass',
    'title' : 'This is an example' });

Parameters:
{Object} attributesPairs: An object containing the names and values of the attributes.

Returns:: {CKFinder.dom.element} This element instance.

{String} setHtml(html)

Since: 2.0

Sets the inner HTML of this element.

var p = new CKFinder.dom.element( 'p' );
p.setHtml( '<b>Inner</b> HTML' );

// result: "<p><b>Inner</b> HTML</p>"

Parameters:
{String} html: The HTML to be set for this element.

Returns:: {String} The inserted HTML.

{Undefined} setOpacity(opacity)

Since: 2.0

Sets the opacity of an element.

var element = CKFinder.dom.element.getById( 'myElement' );
element.setOpacity( 0.75 );

Parameters:
{Number} opacity: A number within the range [0.0, 1.0].

{Undefined} setSize(type, size, isBorderBox)

Since: 2.0

NO EXAMPLE AVAILABLE

Parameters:
{Undefined} type
{Undefined} size
{Undefined} isBorderBox

{CKFinder.dom.element} setStyle(name, value)

Since: 2.0

Sets the value of an element style.

var element = CKFinder.dom.element.getById( 'myElement' );
element.setStyle( 'background-color', '#ff0000' );
element.setStyle( 'margin-top', '10px' );
element.setStyle( 'float', 'right' );

Parameters:
{String} name: The name of the style. The CSS naming notation must be used (e.g. "background-color").
{String} value: The value to be set to the style.

Returns:: {CKFinder.dom.element} This element instance.

{CKFinder.dom.element} setStyles(stylesPairs)

Since: 2.0

Sets the value of several element styles.

var element = CKFinder.dom.element.getById( 'myElement' );
element.setStyles({
    'position' : 'absolute',
    'float' : 'right' });

Parameters:
{Object} stylesPairs: An object containing the names and values of the styles.

Returns:: {CKFinder.dom.element} This element instance.

{String} setText(text)

Since: 2.0

Sets the element contents as plain text.

var element = new CKFinder.dom.element( 'div' );
element.setText( 'A > B & C < D' );
alert( element.innerHTML );  // "A &gt; B &amp; C &lt; D"

Parameters:
{String} text: The text to be set.

Returns:: {String} The inserted text.

{CKFinder.dom.element} setValue(value)

Since: 2.0

Sets the element value. This function is usually used with form field element.

NO EXAMPLE AVAILABLE

Parameters:
{String} value: The element value.

Returns:: {CKFinder.dom.element} This element instance.

{Undefined} show()

Since: 2.0

Shows this element (display it).

var element = CKFinder.dom.element.getById( 'myElement' );
element.show();

{Undefined} toString()

Since: 2.0

NO EXAMPLE AVAILABLE

CKFinder 2 JavaScript API Documentation

Namespaces

Classes

Class CKFinder.dom.element