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.
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
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.
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; // The first element of the document var e2 = e1.all; // 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
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
var specialParagraph = document.all.special; var radioboxes = form.all.shippingMethod;
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
name attributes of unrelated elements.
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.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.
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
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
outerText properties are similar to
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.
Created: November 28, 2001
Revised: November 28, 2001