Class CKEDITOR.dom.element

Extends CKEDITOR.dom.node.

Defined in: core/dom/element.js.

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

Field Summary
Field Attributes	Field Name and Description
	hasAttributes Indicates that the element has defined attributes.
	type The node type.

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

Method Summary
Method Attributes	Method Name and Description
<static>	CKEDITOR.dom.element.createFromHtml(html, ownerDocument) Creates an instance of the CKEDITOR.dom.element class based on the HTML representation of an element.
<static>	CKEDITOR.dom.element.get(element) The the CKEDITOR.dom.element representing and element.
	addClass(className) Adds a CSS class to the element.
	append(node, toStart) Append a node as a child of this element.
	appendText(text) Append text to this element.
	breakParent(parent) Breaks one of the ancestor element in the element position, moving this element between the broken parts.
	focus() Moves the selection focus to this element.
	focusNext() Moves the UI focus to the element following this element in the tabindex order.
	focusPrevious() Moves the UI focus to the element before this element in the tabindex order.
	getAttribute(name) Gets the value of an element attribute.
	getChildren()
	getComputedStyle(propertyName) Gets the current computed value of one of the element CSS style properties.
	getDtd() Gets the DTD entries for this element.
	getElementsByTag(tagName)
	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.
	getLast()
	getName() Gets the element name (tag name).
	getNameAtt() Gets the value of the "name" attribute of this element.
	getNext() Gets the node that follows this element in its parent's child list.
	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.
	hide() Hides this element (display:none).
	is() Checks if the element name matches one or more names.
	moveChildren(target, toStart)
	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.
	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.
	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).
	unselectable() Makes the element and its children unselectable.

Methods borrowed from class CKEDITOR.dom.node:: appendTo, clone, getAscendant, getChild, getChildCount, getDocument, getIndex, getNextSourceNode, getParent, getParents, getPosition, getPrevious, getPreviousSourceNode, hasNext, hasPrevious, insertAfter, insertBefore, insertBeforeMe, move, remove
Methods borrowed from class CKEDITOR.dom.domObject:: equals, getCustomData, setCustomData
Methods borrowed from class CKEDITOR.event:: fire, fireOnce, hasListeners, implementOn, on, removeListener

Class Detail

CKEDITOR.dom.element(element, ownerDocument)

Since: 3.0

Represents a DOM element.

// Create a new <span> element.
var element = new CKEDITOR.dom.element( 'span' );

// Create an element based on a native DOM element.
var element = new CKEDITOR.dom.element( document.getElementById( 'myId' ) );

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

Field Detail

{Boolean} hasAttributes

Since: 3.0

Indicates that the element has defined attributes.

var element = CKEDITOR.dom.element.createFromHtml( 'Example' );
alert( element.hasAttributes() );  "true"

var element = CKEDITOR.dom.element.createFromHtml( 'Example' );
alert( element.hasAttributes() );  "false"

{Number} type

Since: 3.0

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

Method Detail

<static> {CKEDITOR.dom.element} CKEDITOR.dom.element.createFromHtml(html, ownerDocument)

Since: 3.0

Creates an instance of the CKEDITOR.dom.element class based on the HTML representation of an element.

var element = CKEDITOR.dom.element.createFromHtml( '<strong class="anyclass">My element</strong>' );
alert( element.getName() );  // "strong"

Parameters:
{String} html: The element HTML. It should define only one element in the "root" level. The "root" element can have child nodes, but not siblings.
{Undefined} ownerDocument

Returns:: {CKEDITOR.dom.element} The element instance.

<static> {CKEDITOR.dom.element} CKEDITOR.dom.element.get(element)

Since: 3.0

The the CKEDITOR.dom.element representing and element. If the element is a native DOM element, it will be transformed into a valid CKEDITOR.dom.element object.

var element = new CKEDITOR.dom.element( 'span' );
alert( element == CKEDITOR.dom.element.get( element ) );  "true"

var element = document.getElementById( 'myElement' );
alert( CKEDITOR.dom.element.get( element ).getName() );  e.g. "p"

Parameters:
{Undefined} element

Returns:: {CKEDITOR.dom.element} The transformed element.

{Undefined} addClass(className)

Since: 3.0

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

var element = new CKEDITOR.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.

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

Since: 3.0

Append a node as a child of this element.

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

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

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

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

Parameters:
{CKEDITOR.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:: {CKEDITOR.dom.node} The appended node.

{CKEDITOR.dom.node} appendText(text)

Since: 3.0

Append text to this element.

var p = new CKEDITOR.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.

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

{Undefined} breakParent(parent)

Since: 3.0

Breaks one of the ancestor element in the element position, moving this element between the broken parts.

// Before breaking:
//     This is some sample test text
// If "element" is  and "parent" is :
//     This is some sample test text
element.breakParent( parent );

// Before breaking: // This is some sample test text // If "element" is and "parent" is : // This is some sample test text element.breakParent( parent );

Parameters:

{CKEDITOR.dom.element} parent

The anscestor element to get broken.

{Undefined} focus()

Since: 3.0

Moves the selection focus to this element.

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

{Undefined} focusNext()

Since: 3.0

Moves the UI focus to the element following this element in the tabindex order.
Defined in: plugins/tab/plugin.js.

var element = CKEDITOR.document.getById( 'example' ); element.focusNext();

{Undefined} focusPrevious()

Since: 3.0

Moves the UI focus to the element before this element in the tabindex order.
Defined in: plugins/tab/plugin.js.

var element = CKEDITOR.document.getById( 'example' ); element.focusPrevious();

{String} getAttribute(name)

Since: 3.0

Gets the value of an element attribute.

var element = CKEDITOR.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.

{Undefined} getChildren()

Since: 3.0

NO EXAMPLE AVAILABLE

{String} getComputedStyle(propertyName)

Since: 3.0

Gets the current computed value of one of the element CSS style properties.

var element = new CKEDITOR.dom.element( 'span' ); alert( element.getComputedStyle( 'display' ) ); // "inline"

Parameters:

{String} propertyName

The style property name.

Returns:

{String} The property value.

{Object} getDtd()

Since: 3.0

Gets the DTD entries for this element.

NO EXAMPLE AVAILABLE

Returns:

{Object} An object containing the list of elements accepted by this element.

{Undefined} getElementsByTag(tagName)

Since: 3.0

NO EXAMPLE AVAILABLE

Parameters:

{Undefined} tagName

{CKEDITOR.dom.node} getFirst()

Since: 3.0

Gets the first child node of this element.

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

Returns:

{CKEDITOR.dom.node} The first child node or null if not available.

{String} getHtml()

Since: 3.0

Gets the inner HTML of this element.

var element = CKEDITOR.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: 3.0

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

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

Returns:

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

{Undefined} getLast()

Since: 3.0

NO EXAMPLE AVAILABLE

{String} getName()

Since: 3.0

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

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

Returns:

{String} The element name.

{String} getNameAtt()

Since: 3.0

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

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

Returns:

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

{CKEDITOR.dom.node} getNext()

Since: 3.0

Gets the node that follows this element in its parent's child list.

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

Returns:

{CKEDITOR.dom.node} The next node or null if not available.

{Number} getTabIndex()

Since: 3.0

Gets the computed tabindex for this element.

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

Returns:

{Number} The tabindex value.

{String} getText()

Since: 3.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 = CKEDITOR.dom.element.createFromHtml( '<div>Same <i>text</i>.</div>' ); alert( element.getText() ); // "Sample text."

Returns:

{String} The text value.

{String} getValue()

Since: 3.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.

{CKEDITOR.dom.window} getWindow()

Since: 3.0

Gets the window object that contains this element.

Returns:

{CKEDITOR.dom.window} The window object.

{Undefined} hide()

Since: 3.0

Hides this element (display:none).

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

{Boolean} is()

Since: 3.0

Checks if the element name matches one or more names.

var element = new CKEDITOR.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} moveChildren(target, toStart)

Since: 3.0

NO EXAMPLE AVAILABLE

Parameters:

{Undefined} target

{Undefined} toStart

{Undefined} removeAttribute(name)

Since: 3.0

Removes an attribute from the element.

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

Parameters:

{String} name

The attribute name.

{Undefined} removeAttributes(attributes)

Since: 3.0

NO EXAMPLE AVAILABLE

Parameters:

{Undefined} attributes

{Undefined} removeClass(className)

Since: 3.0

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

var element = new CKEDITOR.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: 3.0

Removes a style from the element.

var element = CKEDITOR.dom.element.createFromHtml( '
' ); element.removeStyle( 'display' );

Parameters:

{String} name

The style name.

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

Since: 3.0

Sets the value of an element attribute.

var element = CKEDITOR.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:

{CKEDITOR.dom.element} This element instance.

{CKEDITOR.dom.element} setAttributes(attributesPairs)

Since: 3.0

Sets the value of several element attributes.

var element = CKEDITOR.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:

{CKEDITOR.dom.element} This element instance.

{String} setHtml(html)

Since: 3.0

Sets the inner HTML of this element.

var p = new CKEDITOR.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: 3.0

Sets the opacity of an element.

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

Parameters:

{Number} opacity

A number within the range [0.0, 1.0].

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

Since: 3.0

Sets the value of an element style.

var element = CKEDITOR.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:

{CKEDITOR.dom.element} This element instance.

{CKEDITOR.dom.element} setStyles(stylesPairs)

Since: 3.0

Sets the value of several element styles.

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

Parameters:

{Object} stylesPairs

An object containing the names and values of the styles.

Returns:

{CKEDITOR.dom.element} This element instance.

{String} setText(text)

Since: 3.0

Sets the element contents as plain text.

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

Parameters:

{String} text

The text to be set.

Returns:

{String} The inserted text.

{CKEDITOR.dom.element} setValue(value)

Since: 3.0

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

NO EXAMPLE AVAILABLE

Parameters:

{String} value

The element value.

Returns:

{CKEDITOR.dom.element} This element instance.

{Undefined} show()

Since: 3.0

Shows this element (display it).

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

{Undefined} unselectable()

Since: 3.0

Makes the element and its children unselectable.

var element = CKEDITOR.dom.element.getById( 'myElement' ); element.unselectable();

CKEditor 3.0 JavaScript API Documentation

Namespaces

Classes

Class CKEDITOR.dom.element