Javascript [Electronic resources] : The Definitive Guide (4th Edition) نسخه متنی

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+1 th 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.