Home arrow DHTML arrow Page 8 - Rough Guide To The DOM (part 1)

Shazam! - DHTML

It's the bane of Web developers everywhere - conflicting standards, browser incompatibilities, and code that changes every time a new browser version hits the Web. But fear not - charging in on a white steed comes a heroic knight, clad in the attire of the new W3C DOM and armed with the tools to make this nightmare end forever. Read on to find out how the new DOM finally brings some standards to the decidedly non-standard world of the Web.

  1. Rough Guide To The DOM (part 1)
  2. Back To Basics
  3. Navigating The Family Tree
  4. What's In A Name?
  5. Ducks In A Row
  6. Changing Things Around
  7. Alternatives
  8. Shazam!
By: Vikram Vaswani, (c) Melonfire
Rating: starstarstarstarstar / 10
April 09, 2001

print this article


The DOM also allows you to modify CSS properties of specific HTML tags - asthe 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 anelement on the page. Remember that style properties which are hyphenated -for example, "background-color" and "font-family" - need to be written as asingle word with the first character after the hyphen capitalized - forexample, "backgroundColor" and fontFamily". The next example shouldillustrate 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 berunning through some simple code examples for simple JavaScriptapplications - image swaps, form validation and frame navigation - usingthe new DOM structures. I'll also be discussing the appendChild() andcreateNode() functions, which allow developers to add new elements to thedocument tree through program code. Don't miss it!

>>> More DHTML Articles          >>> More By Vikram Vaswani, (c) Melonfire

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Google Gives Buckyball a Tribute Doodle in H...
- Rough Guide To The DOM (part 2)
- Rough Guide To The DOM (part 1)
- Filters And Transitions In IE5
- Understanding Embedded Fonts

Developer Shed Affiliates


Dev Shed Tutorial Topics: