17.3 DOM Compatibility with Internet Explorer 4

Although IE 4 is not DOM-compliant, it has features that are similar to the core DOM APIs. These features are not part of the DOM standard and are not compatible with Netscape, but they are compatible with later versions of IE. The features are summarized here; consult the client-side reference section of this book for more details.

17.3.1 Traversing a Document

The DOM standard specifies that all Node objects, which includes both the Document object and all Element objects, have a childNodes[] array that contains the children of that node. IE 4 does not support childNodes[], but it provides a very similar children[] array on its Document and HTMLElement objects. Thus, it is easy to write a recursive function like the one shown in Example 17-1 to traverse the complete set of HTML elements within an IE 4 document.

There is one substantial difference between IE 4's children[] array and the standard DOM childNodes[] array, however. IE 4 does not have a Text node type and does not consider strings of text to be children. Thus, a <p> tag that contains only plain text with no markup has an empty children[] array in IE 4. As we'll see shortly, however, the textual content of a <p> tag is available through the IE 4 innerText property.

17.3.2 Finding Document Elements

IE 4 does not support the getElementById( ) and getElementsByTagName( ) methods of the Document object. Instead, the Document object and all document elements have an array property named all[]. As the name suggests, this array represents all the elements in a document or all the elements contained within another element. Note that all[] does not simply represent the children of the document or the element -- it represents all descendants, no matter how deeply nested.

The all[] array can be used in several ways. If you index it with an integer n, it returns the n+1th element of the document or the parent element. For example:

var e1 = document.all[0];  // The first element of the document

var e2 = e1.all[4];        // The fifth element of element 1 

Elements are numbered in the order in which they appear in the document source. Note the one big difference between the IE 4 API and the DOM standard: IE does not have a notion of Text nodes, so the all[] array contains only document elements, not the text that appears within them.

It is usually much more useful to be able to refer to document elements by name rather than number. The IE 4 equivalent to getElementbyId( ) is to index the all[] array with a string rather than a number. When you do this, IE 4 returns the element whose id or name attribute has the specified value. If there is more than one such element (which can happen, since it is common to have multiple form elements, such as radioboxes, with the same name attribute), the result is an array of those elements. For example:

var specialParagraph = document.all["special"];

var radioboxes = form.all["shippingMethod"];  // May return an array 

JavaScript also allows us to write these expressions by expressing the array index as a property name:

var specialParagraph = document.all.special;

var radioboxes = form.all.shippingMethod;

Using the all[] array in this way provides the same basic functionality as getElementById( ) and getElementsByName( ). The main difference is that the all[] array combines the features of these two methods, which can cause problems if you inadvertently use the same values for the id and name attributes of unrelated elements.

The all[] array has an unusual quirk: a tags( ) method that can be used to obtain an array of elements by tag name. For example:

var lists = document.all.tags("UL");  // Find all <ul> tags in the document

var items = lists[0].all.tags("LI");  // Find all <li> tags in the first <ul> 

This IE 4 syntax provides essentially the same functionality as the DOM Document and Element objects' getElementsByTagName( ) method. Note that in IE 4, the tag name should be specified using all capital letters.

17.3.3 Modifying Documents

Like the DOM standard, IE 4 exposes the attributes of HTML tags as properties of the corresponding HTMLElement objects. Thus, it is possible to modify a document displayed in IE 4 by dynamically changing its HTML attributes. If an attribute modification changes the size of any element, the document "reflows" to accommodate its new size. The IE 4 HTMLElement object defines setAttribute( ) , getAttribute( ), and removeAttribute( ) methods as well. These are similar to the methods of the same name defined by the Element object in the standard DOM API.

The DOM standard defines an API that makes it possible to create new nodes, insert nodes into the document tree, reparent nodes, and move nodes within the tree. IE 4 cannot do this. Instead, however, all HTMLElement objects in IE 4 define an innerHTML property. Setting this property to a string of HTML text allows you to replace the content of an element with whatever you want. Because this innerHTML property is so powerful, it has been implemented by Netscape 6 (and the Mozilla browser from which it is derived), even though it is not part of the DOM standard. innerHTML was demonstrated in Example 17-7.

IE 4 also defines several related properties and methods. The outerHTML property replaces an element's content and the entire element itself with a specified string of HTML text. The innerText and outerText properties are similar to innerHTML and outerHTML, except that they treat the string as plain text and do not parse it as HTML. Finally, the insertAdjacentHTML( ) and insertAdjacentText( ) methods leave the content of an element alone but insert new HTML or plain-text content near (before or after, inside or outside) it. These properties and functions are not as commonly used as innerHTML and have not been implemented by Netscape 6. For further details, see "HTMLElement" in the client-side reference section.