|
|
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. 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?
|
|
Article Source: http://www.PopularArticles.com/article5385.html |
|
|
|
Categories 
