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:

• getAttributeNS()

• setAttributeNS()

• removeAttributeNS()

• getAttributeNodeNS()

• setAttributeNodeNS()

• getElementsByTagNameNS()

• hasAttribute()

• hasAttributeNS()

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:

• onOffBehavior

• hasMedia

• syncMaster

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:

• Be careful how you operate on these objects. Traversing the properties in a for( ... in ... ) loop can recursively lock up your browser for some objects that represent high level parts of the DOM hierarchy.

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>

Inheritance chain:

Node object