Michael Wallent
Microsoft Corporation
April 8, 1997
Revised September 30, 1997 (added section "Changing the Text on the Page"
"Object model." The mere mention of the term is enough to strike fear and loathing into the heart of the staunchest C programmer. An object model? Dynamic HTML? What good is that? Well, if you want to build pages that are more interactive, higher performance, and more fun, then read on. If you are content with Hypertext Markup Language (HTML) the way it is, then please go to the special section "Repairing 8086 Processors: Building a Successful Business with the Technology of Yesterday."
You may even ask, "Dynamic HTML—hmm . . . is that like the <BLINK> tag?" Well, no. Dynamic HTML, delivered with Internet Explorer 4.0, brings life to previously static pages. (Whereas the <BLINK> tag brought annoyance to previously non-annoying pages.)
Why is there an object model, and why should you care? Web authors are a creative lot. Using the technology available, they managed to produce some pretty impressive sites. It's a wonder what negative margins and small refreshing frames will do. This creativity was really needed, because the original HTML technology wasn't really designed for dynamic applications (what do physicists from Switzerland know about being dynamic anyway?)
Call us crazy, but we thought that the next big thing in HTML wasn't going to be a new tag. Instead, it would be a new way to control all of the tags that you already have, know, and love. Before we attempt to take credit for the whole idea of HTML pages having an object model, we have a confession: Previous versions of Internet Explorer (and yes, Netscape Navigator) had an object model, too. However, the object model in Internet Explorer 4.0 is a means to an end. That end is Dynamic HTML.
The Dynamic HTML object model delivers four key innovations that allow Web authors to create truly dynamic pages:
Before we dive deeper, it's important to explain a key feature of Dynamic HTML. Changes can be made to the page at any time: before load, during load, and after load; when the user clicks on a button; when the user moves his or her mouse; when it's 12:30 A.M. Whenever.
Now, let's take a closer look at each one of these innovations.
Using Internet Explorer 3.x or the Netscape browsers, a select set of page elements can be accessed from script. Anchors, forms, applets, form elements, and images all can be accessed in script. However, if you want to build a dynamic table of contents, and you need to go through all of the headings on the page—well, it can't be done. The headings aren't accessible.
With the Dynamic HTML object model, this is no longer the case. Every single element on the page is accessible. The document features a collection called the all collection. Guess what this contains? That's right, it's eponymous; it contains all of the elements on the page. This collection is indexed by name and ID. In the following chunk of code, I will get the H1-level heading with ID MyH1.
<H1 id=MyH1 style="font-weight: normal">Dynamic HTML</H1>
<script language=JavaScript>
function findMyH1() {
var e;
e = document.all("MyH1");
}
</script>
Even though this is relatively easy, there is an even easier way to access elements. Just use their ID or name directly.
<script language=JavaScript>
function findMyH1() {
var e;
e = document.all("MyH1");
if (e == MyH1) {
alert("Accessing all elements is easy");
}
}
</script>
Now that it's possible to get to all of these page elements, what can we do with them? Elements have attributes and styles, which can be modified at any time. To change the font style of my heading, the code is trivial.
<script language=JavaScript>
function changeMyH1() {
MyH1.style.fontStyle = "Italic";
}
</script>
When that script executes, the page is updated instantly. It does not have to be reloaded, it just changes automatically. Any attribute or style that you can specify in HTML can be changed dynamically, at any time, with the Dynamic HTML object model.
Graphical-user-interface (GUI) applications are tied together with their event model. One of the key shortcomings of previous HTML object models was that the event model was incomplete. Only a small set of events was available for a select set of tags. With the Dynamic HTML object model, all elements source a full set of mouse, keyboard, focus, and specialized events.
To continue with our H1 example, let's extend it so that the heading will italicize when we mouse over it. To do this, I need only to trap the mouseover and mouseout events on my H1 heading.
<H1 id=MyH1 style="font-weight: normal"
onmouseover="makeItalic();"
onmouseout="makeNormal">
Dynamic HTML</H1>
<script language=JavaScript>
function makeItalic() {
MyH1.style.fontStyle = "Italic";
}
function makeNormal() {
MyH1.style.fontStyle = "Normal";
}
</script>
Now, when the mouse moves over the H1 heading, it will italicize; when it moves away, the H1 heading will return to normal.
Not only can we change the attributes of elements on the page, we can change the actual HTML on the page, on the fly. There are four interesting properties to enable this:
innerHTML
innerText
outerHTML
outerText
The inner properties only apply to container elements—such as DIV, SPAN, and H1—and can be used to replace the actual HTML inside of a container. The outer properties apply to all HTML tags in the body of the document, and can be used to replace an entire element and its contents.
The innerText and outerText properties return a textual representation of the HTML, without the HTML tag information. The innerHTML and outerHTML properties return the actual HTML string, with all of the embedded HTML information.
Using the innerHTML or outerHTML properties tells Internet Explorer to treat the new string and HTML, and to parse it accordingly. Using the innerText or outerText methods tells Internet Explorer to insert the supplied string literally into the document, without parsing it.
These properties give access to the underlying HTML and also the plain text of the elements on the page.
To extend our H1 example even further, we will use the innerHTML property to dynamically change the contents of the H1 heading.
<H1 id=MyH1 style="font-weight: normal" onclick="changeH1();" >
Dynamic HTML</H1>
<script language=JavaScript>
function changeH1() {
// Now, I will replace that text, with some new text
MyH1.innerText = "New Title";
}
</script>
In the previous case, we simply pasted plain text into the document, so we used the innerText method. However, if we use the innerHTML property, our inserted text can actually be new HTML tags.
<script language=JavaScript>
function changeH1() {
var r;
// Now, I will replace that text, with some new text
MyH1.innerHTML = "<MARQUEE>Dynamic HTML is <I>Cool</I></MARQUEE>";
}
</script>
Try that out for fun.
With the Dynamic HTML object model, you can turn pages that were as fun as a Swiss watch into pages that are as fun as a good piece of Swiss chocolate.