|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
Platinum Edition Using HTML 4, XML, and Java 1.2
Note that many of these objects are collections of other objects. The images object, for instance, is a collection of objects associated with all the images in the current document. You can access elements in these collections either by name or by number. If the first image in an HTML document, for example, is defined by the following tag: <IMG SRC=“ryan.jpg” ID=Ryan> you can use the images object to access that image in one of three ways: document.images[0] document.images(“Ryan”) document.images.Ryan Note that arrays in the object model are zero based, so the first element in an array is referenced using zero. Using PropertiesEvery object has properties. To access a property, use the object name followed by a period and the property name. To get the length of the images object, which would tell you how many images are in the current document, you can write the following: document.images.length If the object you are using has properties that can be modified, you can change them in the same way. You can change the URL of the current window, for example, by setting the href property of the location object, as in the following line: Location.href = “<http://www.rpi.edu/~odonnj/>” If this line is executed within a script, the HTML document referenced by it (my home page) will be loaded into your Web browser window. Listing 26.1 shows an example of a program that uses Dynamic HTML’s all object to access all the HTML tags included within the document. In this case, when the document is loaded, a script writes out on the bottom of the document a list of all the HTML tags included in the document (with the exception of the ones written out by the script itself). The script does this by using the length property of the all object to see how many tags there are and then stepping through them using the tagName property to display what the tags are (see Figure 26.2). Listing 26.1 DispTags.htm—The all Object Enables You to Access Every HTML Tag
<HTML>
<HEAD>
<TITLE>Document Object Model: all Object</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Document Object Model: <EM>all</EM> Object</H1>
<HR>
<P>
The script in this example will put up a series of alert boxes
showing all the HTML tags used in this document. The script
uses the <EM>length</EM> and <EM>tagName</EM> properties of
the <EM>all</EM> object.
</P>
<HR>
</CENTER>
<ADDRESS>
Jim O’Donnell, <A HREF=“mailto:odonnj@rpi.edu”>odonnj@rpi.edu</A>
</ADDRESS>
</BODY>
<SCRIPT LANGUAGE=“JavaScript”>
imax = document.all.length
document.write(“<PRE>”)
for(i = 0;i < imax;i++)
if (i < 9)
document.write(“Tag 0” + (i+1) + “ of ” + imax + “:” +
“document.all[0” + i + “].tagName = “ +
document.all[i].tagName + “<BR>”)
else if (i == 9)
document.write(“Tag ” + (i+1) + “ of ” + imax + “: ” +
“document.all[0” + i + “].tagName = ” +
document.all[i].tagName + “<BR>”)
else
document.write(“Tag ” + (i+1) + “ of ” + imax + “: ” +
“document.all[” + i + “].tagName = ” +
document.all[i].tagName + “<BR>”)
document.write(“</PRE>”)
</SCRIPT>
</HTML>
Many properties are associated with HTML element objects in Microsoft’s new object model—too many to go over in any detail here. However, you should be aware of two properties in particular; they are one of the ways that Microsoft’s Dynamic HTML enables you to easily change the content of HTML documents on-the-fly, without going back to the Web server:
Listing 26.2 shows a sample HTML document that demonstrates these two properties and the difference between them. In this case, the tag objects being referenced are attached to the <H1> tag by using the attribute ID=“MyHeading” and to the <P> tag by using the attribute ID=“MyParagraph”. At the end of the document, the JavaScript shown displays the value of the innerHTML and outerHTML properties of the objects corresponding to each of these tags. Notice that the outerHTML value for the <H1> tag is in the H1 heading format and that of the <P> tag has an extra space in it. This occurs, in each case, because outerHTML includes the effects of the container tag as well as its contents (see Figure 26.3). Listing 26.2 ContentP.htm—HTML Document Contents Can Be Accessed Using the innerHTML and outerHTML Properties
<HTML>
<HEAD>
<TITLE>Document Object Model: innerHTML and outerHTML Properties</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1 ID=“MyHeading”>Document Object Model:<BR>
<EM>innerHTML</EM> and
<EM>outerHTML</EM> Properties</H1>
<HR>
<P ID=“MyParagraph”>
The <EM>contents</EM> of the <P> tag “MyParagraph”...
</P>
<HR>
</CENTER>
<ADDRESS>
Jim O’Donnell, <A HREF=“mailto:odonnj@rpi.edu”>odonnj@rpi.edu</A>
</ADDRESS>
<SCRIPT LANGUAGE=“JavaScript”>
document.write(“<PRE>”)
document.write(“document.all[‘MyHeading’].innerHTML = ” +
document.all[‘MyHeading’].innerHTML + “<BR>”)
document.write(“document.all[‘MyHeading’].outerHTML = ” +
document.all[‘MyHeading’].outerHTML + “<BR>”)
document.write(“<HR>”)
document.write(“document.all[‘MyParagraph’].innerHTML = ” +
document.all[‘MyParagraph’].innerHTML + “<BR>”)
document.write(“document.all[‘MyParagraph’].outerHTML = ” +
document.all[‘MyParagraph’].outerHTML + “<BR>”)
document.write(“</PRE>”)
</SCRIPT>
</BODY>
</HTML>
Listing 26.3 shows another example, this one using the innerHTML property to dynamically change the contents of a Web page.
|
|
Products | Contact Us | About Us | Privacy | Ad Info | Home
Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc. All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.
|
)
)
){kind=link}
){kind=link}