org.w3c.dom.core
Class Element

Apart from text, Element nodes are the most common objects in every XML document.

The Element interface represents an Element in an HTML or XML document. Elements may have attributes associated with them; since the Element interface inherits from Node, the generic Node interface attribute attributes may be used to retrieve the set of all attributes for an element. There are methods on the Element interface to retrieve either an Attr object by name or an attribute value by name. In XML, where an attribute value may contain entity references, an Attr object should be retrieved to examine the possibly fairly complex sub-tree representing the attribute value. On the other hand, in HTML, where all attributes have simple string values, methods to directly access an attribute value can safely be used as a convenience.

Note that this object is implemented and supported by the web browser and results of its use may vary.

dir

Specifies the base direction of directionally neutral text and the directionality of tables.

This attribute specifies the base direction of directionally neutral text (i.e., text that doesn't have inherent directionality as defined in [UNICODE]) in an element's content and attribute values. It also specifies the directionality of tables. Possible values:

LTR: Left-to-right text or table.

RTL: Right-to-left text or table.

In addition to specifying the language of a document with the lang attribute, authors may need to specify the base directionality (left-to-right or right-to-left) of portions of a document's text, of table structure, etc. This is done with the dir attribute.

The [UNICODE] specification assigns directionality to characters and defines a (complex) algorithm for determining the proper directionality of text. If a document does not contain a displayable right-to-left character, a conforming user agent is not required to apply the [UNICODE] bidirectional algorithm. If a document contains right-to-left characters, and if the user agent displays these characters, the user agent must use the bidirectional algorithm.

Although Unicode specifies special characters that deal with text direction, HTML offers higher-level markup constructs that do the same thing: the dir attribute (do not confuse with the DIR element) and the BDO element. Thus, to express a Hebrew quotation, it is more intuitive to write

<Q lang="he" dir="rtl"

id

lang

tagName

tagName has the value "elementExample". Note that this is case-preserving in XML, as are all of the operations of the DOM. The HTML DOM returns the tagName of an HTML element in the canonical uppercase form, regardless of the case in the source HTML document.

This is a readonly attribute

Example:

<div id="doc">
<div>
Text in the first DIV.
</div>
<div id="DDD" class="secondClass">
Some text in the second DIV.
</div>
<div class="thirdClass">
Some text and <span id="SSS">element</span> in the third DIV.
</div>
<div class="fourthClass">
We can try <i>another elements</i>.
It will be much more <b>interesting</b>.
</div>
<div>
Text in the last DIV.
</div>
</div>

JavaScript Code Example:

var main = document.getElementById('doc');

var output = main.tagName;

title

Method Detail

getAttribute

<div id="doc">
<div>
Text in the first DIV.
</div>
<div >
Some text in the second DIV.
</div>
<div class="thirdClass">
Some text and <span >element</span> in the third DIV.
</div>
<div class="fourthClass">
We can try <i>another elements</i>.
It will be much more <b>interesting</b>.
</div>
<div>
Text in the last DIV.
</div>
</div>

JavaScript Code Example:

var main = document.getElementById('doc');

var output1 = main.getAttribute('id');

var output2 = main.getAttribute('class');

Parameters:

name

-

The name of the attribute to retieve.

Return:

String - The Attr value as a string, or the empty string if that attribute does not have a specified or default value.

getAttributeNode

Retrieves an attribute node by name. To retrieve an attribute node by qualified name and namespace URI, use the getAttributeNodeNS method.

Example:

<div id="doc">
<div>
Text in the first DIV.
</div>
<div >
Some text in the second DIV.
</div>
<div class="thirdClass">
Some text and <span >element</span> in the third DIV.
</div>
<div class="fourthClass">
We can try <i>another elements</i>.
It will be much more <b>interesting</b>.
</div>
<div>
Text in the last DIV.
</div>
</div>

JavaScript:

var main = document.getElementById('doc');

var output = main.getAttributeNode('id').value;

Parameters:

name

-

The name (nodeName) of the attribute to retrieve.

Return:

Attr - The Attr node with the specified name (nodeName) or null if there is no such attribute.

getElementsByTagName

Returns a NodeList of all descendant Elements with a given tag name, in the order in which they are encountered in a preorder traversal of this Element tree.

Example:

<div id="doc">
<div>
Text in the first DIV.
</div>
<div >
Some text in the second DIV.
</div>
<div class="thirdClass">
Some text and <span >element</span> in the third DIV.
</div>
<div class="fourthClass">
We can try <i>another elements</i>.
It will be much more <b>interesting</b>.
</div>
<div>
Text in the last DIV.
</div>
</div>

JavaScript:

var main = document.getElementById('doc');

var collection = main.getElementsByTagName('div');

var output1 = collection.length;

var output2 = collection[0].firstChild.nodeValue;

Parameters:

name

-

The name of the tag to match on. The special value "*" matches all tags.

getElementsByTagNameNS

Returns a NodeList of all the descendant Elements with a given local name and namespace URI in the order in which they are encountered in a preorder traversal of this Element tree. HTML-only DOM implementations do not need to implement this method.

hasAttribute

Returns true when an attribute with a given name is specified on this element or has a default value, false otherwise.

Example:

<div id="doc">
<div>
Text in the first DIV.
</div>
<div >
Some text in the second DIV.
</div>
<div class="thirdClass">
Some text and <span >element</span> in the third DIV.
</div>
<div class="fourthClass">
We can try <i>another elements</i>.
It will be much more <b>interesting</b>.
</div>
<div>
Text in the last DIV.
</div>
</div>

JavaScript:

var elem1 = document.getElementById('doc');

var elem2 = document.getElementById('DDD');

var output1 = elem1.hasAttribute('class');

var output2 = elem2.hasAttribute('class');

Introduced in DOM Level 2.

Parameters:

name

-

The name of the attribute to look for.

Return:

Boolean - true if an attribute with the given name is specified on this element or has a default value, false otherwise.

hasAttributeNS

Returns true when an attribute with a given local name and namespace URI is specified on this element or has a default value, false otherwise. HTML-only DOM implementations do not need to implement this method.

removeAttribute

Removes an attribute by name. If the removed attribute is known to have a default value, an attribute immediately appears containing the default value as well as the corresponding namespace URI, local name, and prefix when applicable.

<div >
<div>
Text in the first DIV.
</div>
<div >
Some text in the second DIV.
</div>
<div class="thirdClass">
Some text and <span >element</span> in the third DIV.
</div>
<div class="fourthClass">
We can try <i>another elements</i>.
It will be much more <b>interesting</b>.
</div>
<div>
Text in the last DIV.
</div>
</div>

JavaScript:

var main = document.getElementById('doc');

main.removeAttribute('id');

var output = main.getAttribute('id');

Parameters:

name

-

The name of the attribute to remove.

Return:

void - null

Throws:

DOMException NO_MODIFICATION_ALLOWED_ERR: Raised if this node is readonly.

removeAttributeNode

Removes the specified attribute node. If the removed Attr has a default value it is immediately replaced. The replacing attribute has the same namespace URI and local name, as well as the original prefix, when applicable.

Example:

<div >
<div>
Text in the first DIV.
</div>
<div >
Some text in the second DIV.
</div>
<div class="thirdClass">
Some text and <span >element</span> in the third DIV.
</div>
<div class="fourthClass">
We can try <i>another elements</i>.
It will be much more <b>interesting</b>.
</div>
<div>
Text in the last DIV.
</div>
</div>

removeAttributeNS

Removes an attribute by local name and namespace URI. If the removed attribute has a default value it is immediately replaced. The replacing attribute has the same namespace URI and local name, as well as the original prefix.

setAttribute

Adds a new attribute. If an attribute with that name is already present in the element, its value is changed to be that of the value parameter. This value is a simple string; it is not parsed as it is being set. So any markup (such as syntax to be recognized as an entity reference) is treated as literal text, and needs to be appropriately escaped by the implementation when it is written out. In order to assign an attribute value that contains entity references, the user must create an Attr node plus any Text and EntityReference nodes, build the appropriate subtree, and use setAttributeNode(Attr) to assign it as the value of an attribute.

<div >
<div>
Text in the first DIV.
</div>
<div >
Some text in the second DIV.
</div>
<div class="thirdClass">
Some text and <span >element</span> in the third DIV.
</div>
<div class="fourthClass">
We can try <i>another elements</i>.
It will be much more <b>interesting</b>.
</div>
<div>
Text in the last DIV.
</div>
</div>

JavaScript:

var main = document.getElementById('doc');

main.setAttribute('attr', 'temp');

var output = main.getAttribute('attr');

Parameters:

name

-

The name of the attribute to create or alter.

value

-

Value to set in string form.

Return:

void - null

Throws:

DOMException INVALID_CHARACTER_ERR: Raised if the specified name contains an illegal character.

DOMException NO_MODIFICATION_ALLOWED_ERR: Raised if this node is readonly.

<div >
<div>
Text in the first DIV.
</div>
<div >
Some text in the second DIV.
</div>
<div class="thirdClass">
Some text and <span >element</span> in the third DIV.
</div>
<div class="fourthClass">
We can try <i>another elements</i>.
It will be much more <b>interesting</b>.
</div>
<div>
Text in the last DIV.
</div>
</div>

JavaScript:

var main = document.getElementById('doc');

var collection = main.getElementsByTagName('div');

var elem = collection[0];

var attr = collection[2].getAttributeNode('class');

elem.setAttributeNode(attr);

var output = elem.getAttributeNode('class').value;

Parameters:

newAttr

-

The Attr node to add to the attribute list.

Return:

Attr - If the newAttr attribute replaces an existing attribute, the replaced Attr node is returned, otherwise null is returned.

Throws:

DOMException WRONG_DOCUMENT_ERR: Raised if newAttr was created from a different document than the one that created the element.

DOMException NO_MODIFICATION_ALLOWED_ERR: Raised if this node is readonly.

DOMException INUSE_ATTRIBUTE_ERR: Raised if newAttr is already an attribute of another Element object. The DOM user must explicitly clone Attr nodes to re-use them in other elements.

setAttributeNS

Adds a new attribute. If an attribute with the same local name and namespace URI is already present on the element, its prefix is changed to be the prefix part of the qualifiedName, and its value is changed to be the value parameter. This value is a simple string; it is not parsed as it is being set. So any markup (such as syntax to be recognized as an entity reference) is treated as literal text, and needs to be appropriately escaped by the implementation when it is written out. In order to assign an attribute value that contains entity references, the user must create an Attr node plus any Text and EntityReference nodes, build the appropriate subtree, and use setAttributeNodeNS(Attr) or setAttributeNode(Attr) to assign it as the value of an attribute.

DOMException INVALID_CHARACTER_ERR: Raised if the specified qualified name contains an illegal character.

DOMException NO_MODIFICATION_ALLOWED_ERR: Raised if this node is readonly.

DOMException NAMESPACE_ERR: Raised if the qualifiedName is malformed, if the qualifiedName has a prefix and the namespaceURI is null, if the qualifiedName has a prefix that is "xml" and the namespaceURI is different from "http://www.w3.org/XML/1998/namespace", or if the qualifiedName is "xmlns" and the namespaceURI is different from "http://www.w3.org/2000/xmlns/".