|
How to test for the Javascript DOM?
|
By Riaan Pieterse
[Hits: 2050]
|
|
Browsing the forums, development articles and other resourcesites raised an interesting yet recurring question: "How doI test for the Document Object Model (DOM) employed by abrowser?". Strangely enough I was asking the same questionwhen starting out in Javascript. However, after enough time haspassed, with the same thing done more than once, I started torealise that this is a question that begs answering for once andfor all. A Typical Test
Testing for the DOM in itself is easy enough. A recommendedapproach is testing for the support of a DOM, andnot for a browser version. The followingdescribes Boolean variables that indicates the compliance to theDOM 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 anybrowser. This method still requires that you access objectsdescribed by the DOM through that DOM's methods. In the long runthe amount of work you have to do remains more or less thesame. Javasript is an Object Orientated language
Everyone who is familiar with Javascript knows that the languagesupports Object Orientation (OO). Passing objects around invariables is nothing new, so why do people persist in performinglengthy tests for the DOM each time we need to access an object?
The item which describes the document's referencing structure isnothing more that an object itself. This means that you onlyneed to perform the test once, and then proceed to use anarbitrary object that describes the DOM object throughout theremainder of your script. However, since this approach wouldrequire that you define a variable for each and every object youwill be referencing, we need an approach which is morerobust. A Compromise
Typically you access objects though the DOM for one of tworeasons: Get a value, or Set a value. Previous approachesrequire that you access the object through the DOM methods eachand every time you need to perform some action on the object.The same holds true for every other object accessed by yourscript. What we need is a method that will: - Accessthe correct DOM using the relevant methods
- Return theobject of interest
- Not waste time and patience
A practical approach used by myself is described in a functionthat returns your object without any hassles. functiongetDOMObject (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 definedearlier to identify our browser DOM, and returns the objectidentified by its ID / NAME pair. So whenever you need to dosomething to an object, this approach requires that you call thegetDOMObeject () function. For example, the following will setthe value attribute of a hypothetical text box to 'testvalue'. getDOMObject('txtMyTextBoxID').value = "TestValue";
The value of this approach comes to the front in scripts whereyou need to access multiple objects in your document. Forexample: getDOMObject('txtMyTextBoxID1').value = "TestValue 1";
getDOMObject('txtMyTextBoxID2').value = "Test Value2";
getDOMObject('txtMyTextBoxID3').value = "Test Value3";
getDOMObject('txtMyTextBoxID4').value = "Test Value4";
getDOMObject('txtMyTextBoxID5').value = "Test Value5";
getDOMObject('txtMyTextBoxID6').value = "Test Value6";
Looks like a lot less work, doesn't it?
|
|
|
|
|
|
