Element


Team-Fly

	Webmaster in a Nutshell, 3rd Edition By Robert Eckstein, Stephen Spainhour
	Table of Contents

	Chapter 11. JavaScript

Element

DOM Level 1, IE 4

An HTML tag in a document

Inherits From: Node (in DOM Level 1)

Description

The Element object represents an HTML element or tag. IE 4 and later, DOM-compliant browsers such as IE 5 and later, and Netscape 6 and later allow access to every element of a document. They also define the properties and methods listed here on each of those elements. Unfortunately, the methods and properties defined by the IE 4 DOM are not the same as the methods and properties defined by the W3C DOM standard. Because of this incompatibility , they are grouped separately in the following lists.

W3C DOM Properties

In web browsers that support the W3C DOM, all elements in an HTML document have properties that correspond to their HTML attributes, including such universal attributes such as dir, id, lang, and title. When an HTML attribute name consists of multiple words, the corresponding JavaScript property name uses mixed case. Otherwise the JavaScript property is in lowercase (e.g., id and href, but tagIndex and accessKey). Two HTML attributes have names that are reserved words in JavaScript or Java, and special property names are required. JavaScript uses the property className to refer to the class attribute of all HTML tags and uses htmlFor to refer to the for attribute of <label> and <script> tags. In addition to their HTML attributes, all elements define the following properties. Remember also that in DOM-compliant browsers, all HTML elements inherit the properties of the Node object.

className: The string value of the class attribute of the element, which specifies one or more CSS classes. Note that this property is not named "class" because that name is a reserved word in JavaScript.
style: A Style object that represents the style attribute of the HTML element.
tagName: The read-only tag name of the element. For HTML documents, the tag name is returned in uppercase, regardless of its capitalization in the document source. In XHTML documents, the value is in lowercase.

IE DOM Properties

Internet Explorer 4 and later versions define a proprietary DOM. In the IE 4 DOM, as in the W3C DOM, each HTML element has JavaScript properties that correspond to its HTML attributes. In addition, the IE 4 DOM defines the following properties for each element:

all[ ]: An array of all Element objects that are descendants of this element. This array may be indexed numerically to access elements in source order. Or it may be indexed by element id or name. See also Document.all[ ].
children[ ]: An array of Element objects that are direct children of this element. Note that the IE 4 DOM has no equivalent of the Text or Comment nodes, so the children of an element can only be other Element objects.
className: A read/write string that specifies the value of the class attribute of an element.
document: A reference to the containing Document object.
innerHTML: The HTML text contained within the element, not including the opening and closing tags of the element itself. Setting this property replaces the content of the element. Because this nonstandard property is powerful and widely used, it has been implemented by other browsers including Netscape 6 and later and Mozilla.
innerText: The plain text contained within the element, not including the opening and closing tags of the element itself. Setting this property replaces the content of the element with unparsed plain text.
offsetHeight: The height, in pixels, of the element and all its content.
offsetLeft: The X-coordinate of the element relative to the offsetParent container element.
offsetParent: Specifies the container element that defines the coordinate system in which offsetLeft and offsetTop are measured. For most elements, offsetParent is the Document object that contains them. However, if an element has a dynamically positioned ancestor, that ancestor is the offsetParent. Table cells are positioned relative to the row in which they are contained.
offsetTop: The Y-coordinate of the element, relative to the offsetParent container element.
offsetWidth: The width, in pixels, of the element and all its content.
outerHTML: The HTML text of an element, including its start tags, end tags, and content. Setting this property completely replaces the element and its content.
outerText: The plain text of an element, including its start and end tags. Setting this property replaces the element and its contents with unparsed plain text.
parentElement: The element that is the direct parent of this one. This property is read-only.
sourceIndex: The index of the element in the Document.all[ ] array of the document that contains it.
style: A Style object that represents the inline CSS style attributes for this element. Setting properties of this object changes the display style of the element.
tagName: A read-only string that specifies the name of the HTML tag that this element represents.

W3C DOM Methods

In web browsers that support the W3C DOM, all elements in an HTML document support the following methods, and also inherit the methods of Node. Many of these methods are used to get and set attribute values, and are rarely used because Element objects have properties that mirror all their HTML attributes.

g etAttribute( name ): Returns the value of a named attribute as a string.
getAttributeNode( name ): Returns the value of a named attribute as an Attr node.
getElementsByTagName( name ): Returns an array of all descendants of this element that have the specified tag name, in the order in which they appear in the document.
hasAttribute( name ): Returns true if this element has an attribute with the specified name, or false if it does not. DOM Level 2.
removeAttribute( name ): Deletes the named attribute from this element and returns nothing.
removeAttributeNode( oldAttr ): Removes the specified Attr node from the list of attributes for this element. Returns the Attr node that was removed.
setAttribute( name , value ): Sets the named attribute to the specified string value and returns nothing.
setAttributeNode( newAttr ): Adds the specified Attr node to the list of attributes for this element. If an attribute with the same name already exists, its value is replaced. Returns the Attr node that was replaced by newAttr , or null if no attribute was replaced.

IE DOM Methods

Internet Explorer 4 and later versions support the following nonstandard methods for all document elements.

contains( target ): Returns true if this element contains the Element target , or false if it does not.
getAttribute( name ): Returns the value of the named attribute of this element as a string, or null if there is no such attribute.
insertAdjacentHTML( where , text ): Inserts the HTML text into the document near this element at a position specified by where . where must be one of the strings "BeforeBegin", "AfterBegin", "BeforeEnd" or "AfterEnd". Returns nothing.
insertAdjacentText( where , text ): Inserts plain text text into the document near this element, at the position specified by where . Returns nothing.
removeAttribute( name ): Deletes the named attribute and its value from the element. Returns true on success; false on failure.
scrollIntoView( top ): Scrolls the document so this element is visible at the top or bottom of the window. If top is true or is omitted, the element appears at the top of the window. If false, the element appears at the bottom.
setAttribute( name , value ): Sets the named attribute to the specified string value and returns nothing.

Event Handlers

Elements of an HTML document define the following event handlers to respond to raw mouse and keyboard events. Particular types of elements (such as the Form and Input objects) may define more specialized event handlers (such as onsubmit and onchange) that impose an interpretation upon the raw input events.

onclick: Invoked when the user clicks on the element.
ondblclick: Invoked when the user double-clicks on the element.
onhelp: Invoked when the user requests help. IE only.
onkeydown: Invoked when the user presses a key.
onkeypress: Invoked when the user presses and releases a key.
onkeyup: Invoked when the user releases a key.
onmousedown: Invoked when the user presses a mouse button.
onmousemove: Invoked when the user moves the mouse.
onmouseout: Invoked when the user moves the mouse off the element.
onmouseover: Invoked when the user moves the mouse over an element.
onmouseup: Invoked when the user releases a mouse button.