Article
Rough Guide to the DOM
Shazam!
The DOM also allows you to modify CSS properties of specific HTML tags - as the following example demonstrates:
<html>
<head>
<script language="JavaScript">
function disappear()
{
var obj = document.getElementById("mirage");
obj.style.display = "none";
}
</script>
</head>
<body>
<div id="mirage">
Now you see it...
</div>
<a href="javascript:disappear()">...now you don't!</a>
</body>
</html>
I've done something similar in the very first example in this article - take a look at that one too, while you're at it.
Using this technique, it's possible to apply almost any inline style to an element on the page. Remember that style properties which are hyphenated - for example, "background-color" and "font-family" - need to be written as a single word with the first character after the hyphen capitalized - for example, "backgroundColor" and "fontFamily". The next example should illustrate this clearly:
<html>
<head>
<script language="JavaScript">
function transform()
{
var obj = document.getElementById("marvel");
obj.style.fontFamily = "Verdana";
obj.style.fontSize = "40pt";
obj.style.backgroundColor = "red";
obj.style.color = "black";
obj.style.textDecoration = "underline";
obj.style.textAlign = "center";
obj.style.letterSpacing = "10";
}
</script>
</head>
<body>
<div id="marvel">
Captain Marvel
</div>
<a href="javascript:transform()">shazam!</a>
</body>
</html>
That's about it for the moment. In the second part of this article, I'll be running through some simple code examples for simple JavaScript applications - image swaps, form validation and frame navigation - using the new DOM structures. I'll also be discussing the appendChild() and createNode() functions, which allow developers to add new elements to the document tree through program code. Don't miss it!
Note: All examples in this article have been tested on Mozilla (build 18). Examples are illustrative only, and are not meant for a production environment. YMMV!
Copyright Melonfire, 2000. All rights reserved.