Cross-browser programming

[Simba]

In some pages of my website I use a code like the following:


for (var n = 0; n < getTagsArray("S PAN").length; n++){

//SPAN is just an example. I also use other tags
tag = getTagsArray("S PAN")[n];

//make something with tag...
}


function getTagsArray(Ta g){

if(document.all ){ //Internet Explorer
return document.all.ta gs(Tag);
}
else if (document.layer s){ //Netscape
eval("return document.tags." + Tag);
}

}

I want to put all browser-specific code inside the getTagsArray
function. So far, I've programmed only for Internet Explorer (my
browser), but now I want to make my website visible to all browsers.
I'm not sure about the getTagsArray function. Is it right or is there
a better way to do the same thing? And how can I extend that function
to make it work in other browsers?

Finally, where can I find some information about cross-browser
programming? I have the javascript reference for Internet Explorer and
Netscape, but I know nothing about other browsers.

Thanks for your help,

Simba

[Keith Bowes]

Re: Cross-browser programming

Simba wrote:[color=blue]
> In some pages of my website I use a code like the following:
>
>
> for (var n = 0; n < getTagsArray("S PAN").length; n++){
>
> //SPAN is just an example. I also use other tags
> tag = getTagsArray("S PAN")[n];
>
> //make something with tag...
> }
>
>
> function getTagsArray(Ta g){
>
> if(document.all ){ //Internet Explorer
> return document.all.ta gs(Tag);
> }
> else if (document.layer s){ //Netscape
> eval("return document.tags." + Tag);
> }[/color]

The modern way to do this is:
document.getEle mentsByTagName( Tag)

So you may want:
if (document.getEl ementsByTagName )
return document.getEle mentsByTagName( Tag);
else if (document.all) ...
[color=blue]
>
> }
>[/color]

[color=blue]
> I want to put all browser-specific code inside the getTagsArray
> function. So far, I've programmed only for Internet Explorer (my
> browser), but now I want to make my website visible to all browsers.
> I'm not sure about the getTagsArray function. Is it right or is there
> a better way to do the same thing? And how can I extend that function
> to make it work in other browsers?
>
> Finally, where can I find some information about cross-browser
> programming? I have the javascript reference for Internet Explorer and
> Netscape, but I know nothing about other browsers.
>[/color]

All modern sciptable browsers should implement the W3C DOM
<http://www.w3.org/DOM>, level 1 at least.

As long as you stick to DOM 1 objects, methods and properties, you
should be fine. Also, accessing the style property of elements is
fairly global. The single biggest cross-browser trap nowadays is events
(MS refuses to support DOM events).

Search Google for "DOM Compatibility" for more specific info.

[Lasse Reichstein Nielsen]

Re: Cross-browser programming

Keith Bowes <do.not@spam.me > writes:
[color=blue]
> Simba wrote:[/color]
[color=blue][color=green]
> > function getTagsArray(Ta g){
> > if(document.all ){ //Internet Explorer
> > return document.all.ta gs(Tag);
> > }
> > else if (document.layer s){ //Netscape
> > eval("return document.tags." + Tag);
> > }[/color][/color]
[color=blue]
> So you may want:
> if (document.getEl ementsByTagName )
> return document.getEle mentsByTagName( Tag);
> else if (document.all) ...[/color]

I second that. You will also find that the newer versions
of IE understands getElementsByTa gName too.

My reason to butt in: You don't need the eval for Netscape 4. Just
write:
return document.tags[Tag]

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'

[Richard Cornford]

Re: Cross-browser programming

"Simba" <battam@interfr ee.it> wrote in message
news:42959e46.0 306291333.370b0 0e0@posting.goo gle.com...[color=blue]
> In some pages of my website I use a code like the following:
>
> for (var n = 0; n < getTagsArray("S PAN").length; n++){
>
> //SPAN is just an example. I also use other tags
> tag = getTagsArray("S PAN")[n];
>
> //make something with tag...
> }[/color]

This is very inefficient coding. The process of acquiring a collection
or nodeList of all of the tags of a particular type is quite intensive
so repeating that process for each evaluation of the length of the
collection and again to acquire each reference to an element is very
wasteful and relatively slow.

Also, as it is the getTagsArray function is not guaranteed to return an
object at all. The following might be better:-

var tagsCollection = getTagsArray("S PAN")
if(tagsCollecti on){
for (var n = 0; n < tagsCollection. length; n++){
tag = tagsCollection[n];
//make something with tag...
}
}
[color=blue]
> function getTagsArray(Ta g){
>
> if(document.all ){ //Internet Explorer
> return document.all.ta gs(Tag);
> }
> else if (document.layer s){ //Netscape
> eval("return document.tags." + Tag);[/color]

That particular incantation is misguided in several ways. First, it uses
eval to resolve a constructed dot notation property accessor. This is
not necessary and relatively inefficient when compared with the
alternatives:-

URL: http://www.litotes.demon.co.uk/js_info/sq_brackets.html >

However, the document.tags collection on Netscape 4 is not a collection
of references to HTML elements. Netscape 4 does not make the majority of
HTML elements accessible to JavaScript and the document.tags collection
is entirely related to Netscape 4's JavaScript Style Sheets (JSS)
implementation of CSS.
[color=blue]
> }
>
> }
>
>I want to put all browser-specific code inside the getTagsArray
>function. So far, I've programmed only for Internet Explorer
>(my browser), but now I want to make my website visible to all
>browsers. I'm not sure about the getTagsArray function. Is it
>right or is there a better way to do the same thing? And how
>can I extend that function to make it work in other browsers?[/color]

Browsers that implement the W3C DOM level 1 standard (Opera 5+, IE 5.0+,
Netscape 6+, Konqueror 3+, ICEBrowser, and many others) have a
document.getele mentsByTagName function that will do the required task.

For Netscape 4 the process is considerably more complex as you would
have to provide code to search the various collections. Elements with
CSS position properties of 'relative' or 'absolute' will be in the
document.layers collection. INPUT, SELECT and TEXTAREA elements could be
recovered by searching the elements collection of each form on the page
(plus the forms on any documents within layers), and OPTION tags from
the options collections of SELECT elements. FORM elements from the forms
collections, IMG from the images collection and A elements from a
combination of document.anchor s and document.links. That is 120 odd
lines of code to provide a very limited emulation of
getElementsByTa gName on a browser that is little used and will probably
not let you do whatever you were planning on doing with the elements
anyway.
[color=blue]
>Finally, where can I find some information about cross-browser
>programming? I have the javascript reference for Internet
>Explorer and Netscape, but I know nothing about other browsers.[/color]

Locate the comp.lang.javas cript newsgroup archive on groups.google.c om
and read as much of it as you have time to.

Richard.

--

Example JavaScript DOM listings for: Opera 7.11,
Mozilla 1.2 and ICEbrowser 5.4
<URL: http://www.litotes.demon.co.uk/dom_root.html >

[Richard Cornford]

Re: Cross-browser programming

"Richard Cornford" <Richard@litote s.demon.co.uk> wrote in message
news:bdntmc$s5j $1$830fa7b3@new s.demon.co.uk.. .
<snip>[color=blue]
>... That is 120 odd lines of code to provide a very limited
>emulation of getElementsByTa gName on a browser that is
>little used and will probably not let you do whatever you were
>planning on doing with the elements anyway.[/color]

You might still be interested in what that 120 odd lines of code might
look like. This is an example, its strategy is to normalise
document.getEle mentsByTagName on browser that do not support it. This
version does not attempt to handle the problem of extracting CSS
positioned elements on Netscape 4.

if(!document.ge tElementsByTagN ame){
if(document.all ){
document.getEle mentsByTagName = function(nem){
return document.all.ta gs(nem.toUpperC ase());
}
}else{
document.getEle mentsByTagName = function(){
var selTypes = ['select-one','select-multiple','sele ct'];
var inpTypes = ['radio','text', 'reset','submit ','image',
'password','hid den','checkbox' ,'button','file '];
var txATypes = ['textarea'];
function handleName(name , ob, ar){
if((ar[name])&&(ar[name] != ob)){
if((typeof ar[name].length == 'number')&&
(!ar[name].options)){ //is an array (not a select)
var add = true;
for(var c = ar[name].length;c--;){
if(ar[name][c] == ob){
add = false;
break;
}
}
if(add)ar[name][ar[name].length] = ob;
}else{ //is an element
ar[name] = [ar[name], ob];
}
}else{
ar[name] = ob;
}
}
function addCollection(c ol, ar){
if(col){
for(var ob,c = col.length;c--;){
ob = col[c];
if(ob.name)hand leName(ob.name, ob, ar);
if(ob.id)handle Name(ob.id, ob, ar);
ar[ar.length] = ob;
}
}
};
function addOptionsEls(f rms, ar){
var ob,sels = [];
addFormEls(frms , 'select', sels);
for(var c = sels.length;c--;){
if(sels[c].options){
for(var d = sels[c].options.length ;d--;){
ob = sels[c].options[d];
if(ob.name)hand leName(ob.name, ob, ar);
if(ob.id)handle Name(ob.id, ob, ar);
ar[ar.length] = ob;
}
}
}
}
function addFormEls(frm, nem, ar){
if(frm){
var types;
switch(nem){
case 'input':
types = inpTypes;
break;
case 'select':
types = selTypes;
break;
case 'textarea':
types = txATypes;
break;
default:
break;
}
if(types){
for(var e = frm.length;e--;){
var fr = frm[e].elements||frm[e];
var ob,ty,el;
for(var c = fr.length;c--;){
el = fr[c];
if((typeof el.length == 'undefined')||( el.options)){
el = [el];
}
for(var f = el.length;f--;){
if(ty = el[f].type){
for(var d = types.length;d--;){
if(ty == types[d]){
ob = el[f];
if(ob.name)hand leName(ob.name, ob, ar);
if(ob.id)handle Name(ob.id, ob, ar);
ar[ar.length] = ob;
break;
}
}
}
}
}
}
}
}
};
function searchDoc(doc, nem, ar){
if(doc){
switch(nem){
case 'a':
addCollection(d oc.links, ar);
addCollection(d oc.anchors, ar);
break;
case 'img':
addCollection(d oc.images, ar);
break;
case 'input':
case 'select':
case 'textarea':
addFormEls(doc. forms, nem, ar);
break;
case 'option':
addOptionsEls(d oc.forms, ar);
break;
case 'form':
addCollection(d oc.forms, ar);
break;
default:
break;
}
if(doc.layers){
for(var c = doc.layers.leng th;c--;){
searchDoc(doc.l ayers[c].document, nem, ar);
}
}
}
};
return function(nem){
var ar = [];
searchDoc(docum ent, nem.toLowerCase (), ar)
return ar;
};
}();
}
}

Richard.

--

Example JavaScript DOM listings for: Opera 7.11,
Mozilla 1.2 and ICEbrowser 5.4
<URL: http://www.litotes.demon.co.uk/dom_root.html >