Entry

Is there a standard way of referencing an element in script?

What is the standard method of referencing an element object in the DOM?

Aug 13th, 2000 05:14
Rey Nuņez,

The DOM specification includes getElementById() and getElementsByTagName
() methods for general access to all elements in the document tree.

While both IE (since 4.0) and NN (since 6.0) comply with most of the 
standard interface specified in the DOM, these and other versions of 
both browsers used their own proprietory object models prior to 
standardization of the DOM. It becomes imperative then, to understand 
how to work around the differences, to create scripts that will work 
across most browsers. 

Internet Explorer 4.0 and later:
IE4+ provide scripting access to all HTML page elements in the 
following, essentially equivalent, ways. 

- using an element's id 
  elementId.propertyName

- using the document.all collection, and referring to the object either 
via the element's index, name, or id.
  document.all[0].propertyName
  document.all['elementName'].propertyName
  document.all['elementId'].propertyName

For example, the code below can be used in IE to display in an alert 
box the names of all tags on a page:
<script language="JavaScript">
<!--
var htmltags = "";
for (i=0; i < document.all.length; i++) {
  htmltags += document.all[i].tagName + "\n";
  }
alert(htmltags);
//-->
</script>

In addition, IE4+ provides scripting access to the standard set of 
element collections specified in DOM Levels 1 and 2, along with IE's 
proprietory collections. In the same manner, the elements are 
accessible by ordinal index, name or id: 
  form.elements[0]
  window.frames['frameName']
  document.styleSheets['styleSheetId']

Internet Explorer 5.0 and later
Aside from supporting all of the above, IE5+ also provide access to 
elements using the standard DOM2 methods getElementById() and 
getElementsByTagName().

Netscape Navigator 4.0
NN4 and below provide access only to page elements positioned with CSS 
Positioning attributes, and content bound by Netscape's proprietory 
LAYER tag, in the following, essentially equivalent, ways. 

- using a layer's or positioned element's id 
  document.elementId.propertyName
  document['elementId'].propertyName

- using the document.layers collection, and referring to the object 
either by the element's index, name, or id. 
  document.layers[0].propertyName
  document.layers['layerName'].propertyName
  document.layers['layerId'].propertyName

In addition, NN4 provides scripting access to the standard set of 
collections specified in DOM Level 1, along with Netscape's proprietory 
collections, and in the same manner accessible by index, name, or id. 
  document.links[0]
  document.images['imageName']
  navigator.mimeTypes[0].type

Netscape Navigator 6.0
NS6 provides scripting access to all elements similar to IE5, using the 
standard DOM2 methods getElementById() and getElementsByTagName().