Element object (Object/HTML)

A common name for an object that represents an HTML tag or container.

Availability:

DOM level - 1
JavaScript - 1.5
JScript - 3.0
Internet Explorer - 4.0
Netscape - 6.0
Inherits from:Node object
JavaScript syntax:IEmyElement = document.all(anIndex)
IEmyElement = document.all.anElementID
IEmyElement = document.all[anIndex]
IEmyElement = document.children(anIndex)
IEmyElement = document.children.anElementID
IEmyElement = document.children[anIndex]
-myElement = myChildNodes[aName]
-myElement = myChildNodes[anIndex]
-myElement = myDocument.getElementById(anElementID)
-myElement = myDocument.getElementsByName(aName)[anIndex]
-myElement = myDocument.createElement(aTagName)
-myElement = myDocument.documentElement
-myElement = myDocument.getElementsByTagName(aTagName)[anIndex]
HTML syntax:<anHTMLTag>
Argument list:anElementIDThe ID value for the required element
anHTMLTagA tag that represents a realizable concrete object
anIndexAn index location in the collection
aTagNameThe name of an HTML tag to create an element for
aNameAn associative array reference
Object properties:canHaveChildren, canHaveHTML, className, clientHeight, clientLeft, clientTop, clientWidth, contentEditable, currentStyle, dir, document, firstChild, hideFocus, id, innerHTML, innerText, isContentEditable, isDisabled, isTextEdit, lang, language, lastChild, nextSibling, nodeName, nodeType, nodeValue, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, ownerDocument, parentElement, parentNode, parentTextEdit, previousSibling, readyState, recordNumber, runtimeStyle, scopeName, scrollHeight, scrollLeft, scrollTop, scrollWidth, sourceIndex, style, tagName, tagUrn, title, uniqueID
Object methods:addBehavior(), applyElement(), blur(), clearAttributes(), click(), componentFromPoint(), contains(), doScroll(), focus(), getAdjacentText(), getAttribute(), getAttributeNode(), getElementsByTagName(), getExpression(), insertAdjacentHTML(), insertAdjacentText(), mergeAttributes(), normalize(), releaseCapture(), removeAttribute(), removeAttributeNode(), removeBehavior(), removeExpression(), replaceAdjacentText(), scrollIntoView(), setAttribute(), setAttributeNode(), setCapture(), setExpression()
Functions:handleEvent()
Event handlers:onClick, onDblClick, onHelp, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp
Collections:all[], attributes[], behaviorUrns[], childNodes[], children[], filters[]

The standard DOM hierarchy model specifies a variety of properties that should be available across the entire collection of objects. This suggests that all objects in the document would generally behave as if they were sub-classes of a master DOM element object.

DOM level 1 describes an Element object and an HTML object and makes a distinction between the two. JavaScript considers them to be one and the same within a web browser context.

In JavaScript 1.2 and MSIE 4, many HTML tags are represented as objects that have similar methods and properties. It is convenient also to model these as if they were sub-classes of a single super-class. Actually, Netscape at revision 4 does not really support this model very consistently, although it is a sound concept when studying the internals of the MSIE browser. Netscape 6.0 implements a much more robust and complete set of the DOM level 1 capabilities.

The Element object described here includes the behavior of the DOM Element object with some additional properties and methods that are common to many objects in the various browsers.

We call these Element objects. In other reference works they may be called DOM objects, DOM elements or HTML Elements. Trying to work out what kind of element you have is not always easy. Some objects will provide this with their toString() method. Others will need some inspection. You can look at constructor properties for help. Sometimes object.constructor.name will tell you what you need. This is not consistent across all the different kinds of objects, nor is the same technique applicable across all browsers.

By considering all the DOM and HTML Element objects as sub-classes of the Element object class, we can document their common behavior collectively and then deal with any specific behavior they may implement on a case by case basis.

We attempt to de-clutter the object descriptions by abstracting properties, methods, collections and events into a super-class wherever possible. This Element class does not really exist as a concrete class but it helps to understand the internals of the MSIE and Netscape 6.0 browsers in particular to model it like this. A couple of notable exceptions are the document object and window object classes which share some properties etc. with the Element class, but cannot easily be considered to be sub-classes of the Element class. Those properties and methods etc. are used in a contextually different way and may exhibit slightly different behavior, and so they merit being covered in separate (but similar) topics to the ones described as members of the Element topic set.

There is another special class and that is the FormElement object. These are sub-classes of the fundamental Element class, but are a super-class of all Form elements which represent <INPUT> tags. Many of these share common methods and properties in addition to the Element object functionality. Properties, methods, collections and events that relate to the Input object class are discussed under topics beginning with the phrase "Input" and are not duplicated here. However, they are listed here in the summary.

If you are inspecting objects with an enumeration loop, you may want to eliminate Element object properties so that your enumerator only lists special properties of the object you are inspecting. There is actually no object of the Element object type. We explored a great deal of the internal browser model by writing small fragments of JavaScript to walk through the properties of each object type. This yielded some properties that were hitherto undocumented and highlighted some differences between platforms and browsers.

In MSIE, there is a class for each type of HTML tag. There is also an array class for collections of each type of tag. For example, for an imaginary tag called <XXXX>, there will be an object class with the name XXXX which represents tags of that type regardless of whether they are upper or lower cased. There will also be an XxxxArray collection for that class which is yielded by this expression:

document.all.tags("XXXX")

If you create imaginary tags in your documents, MSIE won't render them nor will it create objects to represent them. However, the expression shown above will yield an empty collection of an appropriate type.

Versions of Netscape prior to 6.0 do not implement this mechanism because they manage its content with a different DOM construction technique. Netscape 6.0 and MSIE support a more consistent interface to all of the tags in a document. No version of Netscape provides the all[] collection.

If you want to examine the properties of Element objects you need to be able to isolate those properties that are inherited and those that are not. The example code for MSIE includes a function that you can use to exclude items that are inherited from Element objects as you enumerate the properties of an object. We used this to examine the undocumented structures within web content viewed in the browsers. There is also an attribute accessor function demonstrated here. The rest of the example demonstrates a framework for examining object properties.

The DOM level 2 specification adds the following new methods to support namespaces:

DOM level 2 moves the normalize() method to the Node object but it is still available here through inheritance.

As the DOM standards advance and proliferate and the browser become more DOM standards compliant, a standards based approach to the documentation may become more appropriate. We have structured our coverage around a browser-centric approach.

Element objects will have other properties and methods not included here because they are not yet implemented or fall outside the standard. The following properties are present in some implementations for example:

These are part of the SMIL and HTML+TIME standards which are still in a state of evolution and therefore the behavior of the implementation may change.

Warnings:

Example code:

   <HTML>
   <HEAD></HEAD>
   <BODY >
   <IMG ID="IMAGE1" SRC="aaa.gif">
   <TABLE CELLPADDING=2 CELLSPACING=2 BORDER=1>
   <SCRIPT>
   var myObject = document.getElementById("IMAGE1");
   document.write(displayProperties(myObject));
   
   // Display a table of enumerated properties
   function displayProperties(anObject)
   {
      var myOut = "";
      myOut += '<TR BGCOLOR="ANTIQUEWHITE">';
      myOut += "<TD>Object type</TD><TD>";
      myOut += typeof anObject;
      myOut += "</TD><TD>";
      myOut += anObject;
      myOut += "</TD><TD>Name</TD><TD>Specified</TD>";
      myOut += "<TD>Value</TD></TR>";
   
      for(myProp in anObject)
      {
         // Place a not symbol on this condition to see
         // non inherited properties
         if(isElementProperty(myProp))
         {
            myOut += "<TR><TD>";
            myOut += myProp;
            myOut += "</TD><TD>";
            myOut += typeof anObject[myProp];
            myOut += "</TD><TD>";
            myOut += displayableValue(myProp, anObject[myProp]);
            myOut += "</TD><TD>";
            myOut += getPropAttr(anObject, myProp, "name"); 
            myOut += "</TD><TD>";
            myOut += getPropAttr(anObject, myProp, "specified");
            myOut += "</TD><TD>";
            myOut += getPropAttr(anObject, myProp, "value");
            myOut += "</TD></TR>";
         }
      }
   
      return myOut;
   }
   
   // Prevent recursive displays
   function displayableValue(aProperty, aValue)
   {
      switch(aProperty)
      {
         case "innerHTML"       :
         case "innerText"       :
         case "outerHTML"       :
         case "outerText"       : 
            return "**" + aProperty + "**";
      }
      return aValue;
   }
   
   // Element object property flag
   function isElementProperty(aProperty)
   {
      // Refer to isElementProperty() topic for code
   }
   
   // Property attribute accessor
   function getPropAttr(anObject, aProp, anAttrib)
   {
      // Refer to Element.attributes[] topic for code
   }
   
   </SCRIPT>
   </TABLE>
   </BODY>
   </HTML>

See also:Attributes object, Document.all[], Document.createElement(), Document.documentElement, isElementProperty(), Node object

PropertyJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
canHaveChildren n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/a-
canHaveHTML n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/aReadOnly
className1.5 1.53.0 3.06.0 6.04.0 4.0 n/a n/a n/a1 1 n/a n/aWarning
clientHeight n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning , ReadOnly
clientLeft n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning , ReadOnly
clientTop n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning , ReadOnly
clientWidth n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning , ReadOnly
contentEditable n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
currentStyle n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/aWarning
dir1.5 1.55.0 5.06.0 6.05.0 5.0 n/a n/a n/a1 1 n/a n/a-
document n/a3.0 3.0 n/a4.0 4.05.0 5.0 n/a n/a n/a n/a n/aWarning , ReadOnly
firstChild1.5 1.55.0 5.06.0 6.05.0 5.0 n/a n/a n/a1 1 n/a n/a-
hideFocus n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
id1.5 1.53.0 3.06.0 6.04.0 4.0 n/a n/a n/a1 1 n/a n/aWarning
innerHTML1.5 1.53.0 3.06.0 6.04.0 4.0 n/a n/a n/a n/a n/a n/aWarning
innerText n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
isContentEditable n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/aReadOnly
isDisabled n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/aReadOnly
isTextEdit n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aReadOnly
lang1.5 1.53.0 3.06.0 6.04.0 4.0 n/a n/a n/a1 1 n/a n/a-
language n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
lastChild1.5 1.55.0 5.06.0 6.05.0 5.0 n/a n/a n/a1 1 n/a n/a-
nextSibling1.5 1.55.0 5.06.0 6.05.0 5.0 n/a n/a n/a1 1 n/a n/a-
nodeName1.5 1.55.0 5.06.0 6.05.0 5.0 n/a n/a n/a1 1 n/a n/aReadOnly
nodeType1.5 1.55.0 5.06.0 6.05.0 5.0 n/a n/a n/a1 1 n/a n/aReadOnly
nodeValue1.5 1.55.0 5.06.0 6.05.0 5.0 n/a n/a n/a1 1 n/a n/a-
offsetHeight n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning , ReadOnly
offsetLeft n/a3.0 3.0 n/a4.0 4.05.0 5.0 n/a n/a n/a n/a n/aWarning , ReadOnly
offsetParent n/a3.0 3.0 n/a4.0 4.05.0 5.0 n/a n/a n/a n/a n/aWarning , ReadOnly
offsetTop n/a3.0 3.0 n/a4.0 4.05.0 5.0 n/a n/a n/a n/a n/aWarning , ReadOnly
offsetWidth n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning , ReadOnly
outerHTML n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
outerText n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
ownerDocument1.5 1.55.0 5.06.0 6.05.0 5.0 n/a n/a n/a1 1 n/a n/aReadOnly
parentElement n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aReadOnly
parentNode1.5 1.55.0 5.06.0 6.05.0 5.05.0 5.0 n/a n/a1 1 n/a n/aReadOnly
parentTextEdit n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning , ReadOnly
previousSibling1.5 1.55.0 5.06.0 6.05.0 5.0 n/a n/a n/a1 1 n/a n/a-
readyState n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aReadOnly
recordNumber1.5 1.53.0 3.06.0 6.04.0 4.0 n/a n/a n/a1 1 n/a n/aWarning
runtimeStyle n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/a-
scopeName n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/a-
scrollHeight n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/aWarning , ReadOnly
scrollLeft n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/aWarning
scrollTop n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/aWarning
scrollWidth n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/aWarning , ReadOnly
sourceIndex n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning , ReadOnly
style1.5 1.53.0 3.06.0 6.04.0 4.05.0 5.0 n/a n/a2 2 n/a n/a-
tagName1.5 1.53.0 3.06.0 6.04.0 4.05.0 5.0 n/a n/a1 1 n/a n/aReadOnly
tagUrn n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/a-
title1.5 1.53.0 3.06.0 6.04.0 4.0 n/a n/a n/a1 1 n/a n/aWarning
uniqueID n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/aReadOnly

MethodJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
addBehavior() n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/a-
applyElement() n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/aWarning
blur()1.5 1.53.0 3.06.0 6.04.0 4.0 n/a n/a n/a1 1 n/a n/aWarning
clearAttributes() n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/aWarning
click() n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
componentFromPoint() n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/a-
contains() n/a3.0 3.0 n/a4.0 4.05.0 5.0 n/a n/a n/a n/a n/a-
doScroll() n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/a-
focus()1.5 1.53.0 3.06.0 6.04.0 4.0 n/a n/a n/a1 1 n/a n/aWarning
getAdjacentText() n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/a-
getAttribute()1.5 1.53.0 3.06.0 6.04.0 4.05.0 5.0 n/a n/a1 1 n/a n/aWarning
getAttributeNode()1.5 1.55.0 5.06.0 6.05.0 5.0 n/a n/a n/a1 1 n/a n/a-
getElementsByTagName()1.5 1.55.0 5.06.0 6.05.0 5.05.0 5.0 n/a n/a1 1 n/a n/aWarning
getExpression() n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/a-
insertAdjacentHTML() n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
insertAdjacentText() n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
mergeAttributes() n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/a-
normalize()1.5 1.5 n/a6.0 6.0 n/a n/a n/a n/a1 1 n/a n/a-
releaseCapture() n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/a-
removeAttribute()1.5 1.53.0 3.06.0 6.04.0 4.0 n/a n/a n/a1 1 n/a n/aWarning
removeAttributeNode()1.5 1.55.0 5.06.0 6.05.0 5.0 n/a n/a n/a1 1 n/a n/a-
removeBehavior() n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/a-
removeExpression() n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/a-
replaceAdjacentText() n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/a-
scrollIntoView() n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
setAttribute()1.5 1.53.0 3.06.0 6.04.0 4.05.0 5.0 n/a n/a1 1 n/a n/a-
setAttributeNode()1.5 1.55.0 5.06.0 6.05.0 5.0 n/a n/a n/a1 1 n/a n/a-
setCapture() n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/a-
setExpression() n/a5.0 5.0 n/a5.0 5.0 n/a n/a n/a n/a n/a n/a-

Event nameJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
onClick1.5 1.53.0 3.06.0 6.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onDblClick1.5 1.53.0 3.06.0 6.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onHelp n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
onKeyDown1.5 1.53.0 3.06.0 6.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onKeyPress1.5 1.53.0 3.06.0 6.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onKeyUp1.5 1.53.0 3.06.0 6.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onMouseDown1.5 1.53.0 3.06.0 6.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onMouseMove1.5 1.53.0 3.06.0 6.04.0 4.0 n/a n/a n/a n/a n/a4.0 4.0Warning
onMouseOut1.5 1.53.0 3.06.0 6.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onMouseOver1.5 1.53.0 3.06.0 6.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onMouseUp1.5 1.53.0 3.06.0 6.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning

Inheritance chain:

Node object

insert figure 0042