لطفا منتظر باشید ...
The DHTML Object Model
If you've been buried in a Visual C++ .NET project and haven't yet had time to take a peek at HTML, the first thing you should know is that HTML is an ASCII markup language format. Here is the code for a very basic HTML page:
<html>
<head>
<title>
This is an example of a very basic HTML page!
</title>
</head>
<body>
<h1>This is some text with H1!
</h1>
<h3>
This is some text with H3!
</h3>
</body>
</html>
This basic HTML "document" is composed of the following elements:
A head (or header) In this example, the header contains a title: "This is an example of a very basic HTML page!"
The body of the document The body in this example contains two text elements. The first has the heading 1 (h1) style and reads, "This is some text with H1!" The second text element has the heading 3 (h3) style and reads, "This is some text with H3!"
The end result is an HTML page that, when displayed in Internet Explorer, looks like Figure 29-1.
Figure 29-1: A very basic HTML page, as seen in Internet Explorer.
When Internet Explorer loads this sample HTML page, it creates an internal representation that you can traverse, read, and manipulate through the DHTML object model. Figure 29-2, on the following page, shows the basic hierarchy of the DHTML object model.
Figure 29-2: The basic hierarchy of the DHTML object model.
At the root of the object model is the window object. This object can be used from a script to perform some action, such as popping up a dialog box. Here's an example of some JScript that accesses the window object:
<SCRIPT LANGUAGE="JScript">
function about()
{
window.showModalDialog("about",",
"dialogWidth:25em;dialogHeight13em")
}
</SCRIPT>
When the about script function is called, it calls the showModalDialog function in the window DHTML object to display a dialog box. This example also illustrates how scripts access the object model—through globally accessible objects that map directly to the corresponding object in the DTHML object model.The window object has several "subobjects" that allow you to further manipulate portions of Internet Explorer. The document object is what we'll spend most of our time on in this chapter because it gives us programmatic access to the various elements of the currently loaded HTML document. On page 853, you'll see some JScript that shows how to create basic dynamic content that changes the document object.
<HTML>
<HEAD>
<TITLE>Welcome!</TITLE>
<SCRIPT LANGUAGE="JScript">
function changeMe() {
document.all.MyHeading.outerHTML =
"<H1 ID=MyHeading>Dynamic HTML is magic!</H1>";
document.all.MyHeading.style.color = "green";
document.all.MyText.innerText = "Presto Change-o! ";
document.all.MyText.align = "center";
document.body.insertAdjacentHTML("BeforeEnd",
"<P ALIGN=\"center\">Open Sesame!</P>");
}
</SCRIPT>
<BODY onclick="changeMe()">
<H3 ID=MyHeading> Dynamic HTML demo!</H3>
<P ID=MyText>Click anywhere to see the power of DHTML!</P>
</BODY>
</HTML>
This script changes the MyHeading and MyText objects in the HTML documents on the fly. Not only does it change the text, but it also changes attributes of the elements such as color and alignment. If you want to see this script in action, you can find it in the
Ex29_1l file on the companion CD.Before we further deconstruct the DHTML object model, let's examine the DHTML concept of a collection. Collections in DHTML are logically equivalent to C++ data structures such as linked lists. In fact, access to the DHTML object model is performed largely by iterating through collections to search for a particular HTML element and then potentially iterating through another subcollection to get to yet another element. Elements contain several methods, such as contains and length, that you use to traverse the elements.For example, one subelement of the document object is a collection named all that contains all of the document's elements. In fact, most of the subobjects of the document object are collections. The following script ( Ex29_2l ) shows how to iterate through the all collection and list the various items of a document:<HTML>
<HEAD>
<TITLE>Iterating through the all collection.</TITLE>
<SCRIPT LANGUAGE="JScript">
function listAllElements() {
var tag_names = ";
for (i=0; i<document.all.length; i++)
tag_names = tag_names + document.all(i).tagName + " ";
alert("This document contains: " + tag_names);
}
</SCRIPT>
</HEAD>
<BODY onload="listAllElements()">
<H1>DHTML Rocks!</H1>
<P ID=MyText>This document is <B> very </B> short.</P>
</BODY>
</HTML>
Notice how easy it is to retrieve items with script. (The syntax calls for parentheses, much like when you access an array in C++.) Also notice that each element in an HTML document has properties such as tagName that allow you to programmatically "search" for various elements. For example, if you want to write a script that filters out all bold items, you can scan the all collection for an element with tagName equal to B.Now you know the basics of the DHTML object model and you understand how to access them through scripts from the Webmaster's perspective. Let's look at how Visual C++ .NET lets us work with DHTML from an application developer's perspective.
