How to test for the Javascript DOM? by Riaan Pieterse
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.
<h3>A Typical Test</h3>
Testing for the DOM in itself is easy enough. A recommended approach is testing
for the support of a DOM, and <strong>not</strong> for a browser
version. The following describes Boolean variables that indicates the
compliance to the DOM methods and parameters that you are targeting:
<code>isIE4 = document.all? true : false;
isIE6 = document.getElementById && document.all ? true : false;
isNS4 = document.layers? true : false;
isNS6 = document.getElementById && !document.all ? true : false;
</code>
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.
<h3>Javasript is an Object Orientated language</h3>
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.
<h3>A Compromise</h3>
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.
<code>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);
}
}</code>
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'.
<code>getDOMObject('txtMyTextBoxID').value = "Test Value";</code>
The value of this approach comes to the front in scripts where you need to
access multiple objects in your document. For example:
<code>getDOMObject('txtMyTextBoxID1').value = "Test Value
1";</code>
<code>getDOMObject('txtMyTextBoxID2').value = "Test Value
2";</code>
<code>getDOMObject('txtMyTextBoxID3').value = "Test Value
3";</code>
<code>getDOMObject('txtMyTextBoxID4').value = "Test Value
4";</code>
<code>getDOMObject('txtMyTextBoxID5').value = "Test Value
5";</code>
<code>getDOMObject('txtMyTextBoxID6').value = "Test Value
6";</code>
Looks like a lot less work, doesn't it?
About the Author
Riaan Pieterse is the CEO and founder of Kerberos Internet Services CC, South
Africa. Having spent a number of years conducting various consulting
assignments in the Far East, Middle East, Africa and Europe to businesses and
governments alike, Riaan has a solid understanding of the business and
technology issues in today's market. For more information visit
www.kerberosdev.net or www.kerberosb2b.com
|
