How to test for the Javascript DOM?

Subscribe Now

Receive alert message from us when new articles submitted to our site for free.

How to test for the Javascript DOM?

By: Riaan Pieterse

Article Word Count: 972 words [Comments (0)]
Total Views: 146 Views

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?

Grab this articles

<h1>How to test for the Javascript DOM?</h1> 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 not 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: <ol> <li>Access the correct DOM using the relevant methods</li> <li>Return the object of interest</li> <li>Not waste time and patience</li> </ol> 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? More <a href="http://www.articlesroom.com">free articles</a> from <a href="http://www.articlesroom.com">http://www.articlesroom.com</a>

Subscribe Now

Sponsors

Categories

Home / Computer Programming / Javascript

How to test for the Javascript DOM?

A Typical Test

Javasript is an Object Orientated language

A Compromise

Grab this articles

Related articles

Newest Articles

Most Popular Articles