Section 15.11. The IE 4 DOM

15.11. The IE 4 DOM

Although IE 4 does not implement the W3C DOM, it supports an API with many of the same capabilities as the core W3C DOM. IE 5 and later support the IE 4 DOM, and some other browsers also have at least partial compatibility. At the time of this writing, the IE 4 browser is no longer widely deployed. Newly written JavaScript code does not typically need to be written for compatibility with IE 4, and much of the reference material for the IE 4 DOM has been deleted from Part IV in this edition of the book. Nevertheless, a large body of extant code still uses the IE 4 DOM, and it is valuable to have at least a passing familiarity with this API.

15.11.1. Traversing a Document

The W3C DOM 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 similar children[] array on its Document and HTMLElement objects. Thus, it is easy to write a recursive function like that shown in Example 15-2 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 W3C 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 you'll see shortly, however, the textual content of a <p> tag is available through the IE 4 innerText property.

15.11.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 and between 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, because it is common to have multiple form elements, such as radio buttons, with the same name attribute), the result is an array of those elements. For example:

 var specialParagraph = document.all["special"]; var buttons = form.all["shippingMethod"];  // May return an array 

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

 var specialParagraph = document.all.special; var buttons = 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 standard getElementsByTagName() method of the Document and Element interfaces. Note, however, that in IE 4, the tag name must be specified using all uppercase letters.

15.11.3. Modifying Documents

Like the W3C DOM, 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 W3C DOM 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 all modern browsers and seems likely to be incorporated into some future revision of the DOM standard. innerHTML was documented and demonstrated in Section 15.8.2.

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 Firefox.