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:
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:
- 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.
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:
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.
- 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 <<