How to test for the Javascript DOM?
Browsing the forums, development articles and other resource
sites raised an interesting yet recurring question: "How do
I test for the Document Object Model (DOM) employed by a
browser?". Strangely enough I was asking the same question
when starting out in Javascript. However, after enough time has
passed, with the same thing done more than once, I started to
realise that this is a question that begs answering for once and
for all.
A Typical Test
Testing for the DOM in
itself is easy enough. A recommended approach is testing for the
support of a DOM, and not for a browser
version. The following describes Boolean variables that
indicates the compliance to the DOM methods and parameters that
you are targeting:
isIE4 = document.all? true :
false;
isIE6 = document.getElementById &&
document.all ? true : false;
isNS4 = document.layers? true :
false;
isNS6 = document.getElementById &&
!document.all ? true : false; The above items return
a set of true or false values for any browser. This method still
requires that you access objects described by the DOM through
that DOM's methods. In the long run the amount of work you have
to do remains more or less the same.
Javasript is an
Object Orientated language
Everyone who is familiar with
Javascript knows that the language supports Object Orientation
(OO). Passing objects around in variables is nothing new, so why
do people persist in performing lengthy tests for the DOM each
time we need to access an object?
The item which
describes the document's referencing structure is nothing more
that an object itself. This means that you only need to perform
the test once, and then proceed to use an arbitrary object that
describes the DOM object throughout the remainder of your
script. However, since this approach would require that you
define a variable for each and every object you will be
referencing, we need an approach which is more robust.
A
Compromise
Typically you access objects though the DOM
for one of two reasons: Get a value, or Set a value. Previous
approaches require that you access the object through the DOM
methods each and every time you need to perform some action on
the object. The same holds true for every other object accessed
by your script. What we need is a method that will:
- Access the correct DOM using the relevant methods
- Return the object of interest
- Not waste time and
patience
A practical approach used by myself is
described in a function that returns your object without any
hassles.
function getDOMObject (documentID){
if
(isIE4){
return document.all[documentID];
}else
if(isIE6){
return document.getElementById(documentID);
}else if (isNS4){
return document.layers[documentID];
}else if (isNS6){
return
document.getElementById(documentID);
}
} The
above function comprimises by using the typical test defined
earlier to identify our browser DOM, and returns the object
identified by its ID / NAME pair. So whenever you need to do
something to an object, this approach requires that you call the
getDOMObeject () function. For example, the following will set
the value attribute of a hypothetical text box to 'test
value'.
getDOMObject('txtMyTextBoxID').value = "Test
Value"; The value of this approach comes to the front
in scripts where you need to access multiple objects in your
document. For example:
getDOMObject('txtMyTextBoxID1').value = "Test Value
1";
getDOMObject('txtMyTextBoxID2').value =
"Test Value 2";
getDOMObject('txtMyTextBoxID3').value = "Test Value
3";
getDOMObject('txtMyTextBoxID4').value =
"Test Value 4";
getDOMObject('txtMyTextBoxID5').value = "Test Value
5";
getDOMObject('txtMyTextBoxID6').value =
"Test Value 6"; Looks like a lot less work, doesn't
it?
