 | ||
|
| ||
| ||
|
| ||
Michael Wallent
Lead Program Manager
Microsoft Corporation
April 8, 1997
Updated: September 30, 1997
The following article was originally published in Site Builder Magazine (now known as MSDN Online Voices).
"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 HTML the way it is, then please go to special section 7: 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.
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 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:
Using Internet Explorer 3. x (and even with 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 instantly is updated. 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.
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 above 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.
Michael Wallent is Microsoft's lead program manager for Dynamic HTML and a connoisseur of the finer things in life, on and off the Web.
For technical how-to questions, check in with the Web Men Talking, the MSDN Online 's answer pair.
Did you find this material useful? Gripes? Compliments? Suggestions for other articles? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top