|
This is a "basic" tutorial so it's way to early to go into the details of the DOM. I just want you to be aware of what problems you can run into and give you a general idea of how much the JavaScript syntax can differ between the DOMs.
The DOM is the structure of a document. If we know how the DOM works and how the objects are organized we have the "roadmap" we need to access all the objects in the document. The JavaScript Bible (by Danny Goodman, ISBN 0-7645-3342-8) comes with a DOM map on CD, you can print the "map" and put it on your wall! :-)
Currently we have 3 major DOMs, one in NN4, one in IE4-5 and the new DOM that is used in all newer browsers like IE6+, NN6+, Moz1, Opera, etc...
In the object tutorial we talked about the "path" to an object, let's take a look at how much the syntax differs when we write the same "path" for three different browsers, and DOMs.
This code will make the layer "layer1" invisible:
In NN4
document.layers["layer1"].visibility="hidden"
InIE5
document.all["layer1"].style.visibility="hidden"
In NN7
document.getElementById("layer1").style.visibility="hidden"
Now when you know that you sometimes need different syntaxes for different browsers you might ask yourself how it's possible to make your script use the correct syntax for the visitor's browser.
One solution could be to write a browser detecting script that checks the browser's brand and version, a "browser sniffer". This would be a pretty difficult task, you must get the DOM support of all the browser brands and versions absolutely right, and if a new browser is introduced on the market you must rewrite all your scripts to make them check for the new browser.
A much simpler solution is to check for objects! "document.layers", "document.all" and "document.getElementById" are all objects, and it's very easy to check if they exist or not. If a new browser is released you will not need to rewrite your scripts! You are looking for an object not a brand or a version number!!
Let's see how a real world script would look:
<script type="text/javascript">
<!--
function makeHidden(){
if (document.getElementById){
document.getElementById("layer1").style.visibility="hidden"
}
if(document.all){
document.all["layer1"].style.visibility="hidden"
}
if(document.layers){
document.layers["layer1"].visibility="hidden"
}
}
// -->
</script>
- Paste the script in the head section of a page.
- Add a layer (floating box) and name it "layer1" (no quotes).
- Write some text in the layer.
- Make a text link and enter this in the link inspector URL box: javascript:makeHidden()
When you click the link the layer will be hidden. Your script will work in all browsers that support scripting of layers!
You should know that IE supports both "document.all" and "document.getElementById" so in order to keep IE from executing two options in the script we would have to make one small change:
We change the line:
"if (document.getElementById){
to
if (document.getElementById&&!document.all){
Which means: Execute this if the "document.getElement" object exist and "document.all" doesn't exist. ("!" means "not" and "&&" means "and").
The layer will be hidden twice if we don't make the correction in the script. That's not a big problem in this case, but in other scenarios you can get very strange results if you don't keep this special IE "feature" in mind.
You should now know that:
- The DOM is the structure of the document.
- Sometimes you need different JavaScript syntax for different browsers.
- There is more than one DOM.
- All newer browsers use the DOM that is commonly called "The NEW DOM"
- The syntax you use must be based on the DOM you are targeting.
- It's easier to detect objects than browser brands and versions.
I will cover more of the DOM in future tutorials.
Back to tutorial index <<
|
