How to check if a named SPAN element exists (IE)?

**Richard Cornford** · Jul 20 '05, 01:33 PM

Re: How to check if a named SPAN element exists (IE)?

"Mike" <mike@nomail.se > wrote in message
news:7wuNb.7833 1$dP1.192486@ne wsc.telia.net.. .[color=blue]
>I´ve got a number of SPAN elements named "mySpan1", "mySpan2",
>"mySpan3" etc,[/color]

When you say "named" do you mean they have NAME attributes? The NAME
attribute is not valid on SPAN elements according to the HTML 4 DTDs.
But as the example strings conform to the requirements of an ID
attribute and ID attributes are valid on all elements, it would make
sense to be using an ID attribute.
[color=blue]
>and want to set their "style.disp lay" to "inline".[/color]

The default display property of a SPAN element is "inline", but maybe
you have pre-set them to "none" in the CSS.
[color=blue]
> This works (only needs to work on IE5.5+):[/color]

Intranet or broken by design (in the sense that there is nothing here
that would prevent this form being implemented 100% successfully on
every modern dynamic visual browser (and then some))? It is often
helpful to go into the context in which you are working when asking
questions here.
[color=blue]
> for (var x = 1; x < 20; x++) {
> document.all('m ySpan'+x).style .display = "inline";[/color]

IE blurs the distinction between objects and function when dealing with
host objects and method. Native code method report that they or "object"
when tested with the typeof operator and DOM elements and collections
appear to accept property look-ups in the form of parameterised function
calls. But the document.all collection is best thought of as an object,
and so references to named properties of that object should use the
standard ECMA Script (which JScript claims to be an implementation of)
square bracket notation property accessor syntax:-

document.all['mySpan'+x].style.display = "inline";

It is difficult to say why IE allows parenthesise to be used in place of
property accessors to achieve the same task. It might be an attempt to
make scripting easier for people who don't really understand what they
are doing (tolerate what would be errors in other, stricter,
environments). But habitually using parentheses instead of square
brackets when accessing DOM object properties is one of the things that
makes IE centred script authors convinced that cross-browser scripting
is harder than it really is. If they had just learnt to use the proper
language feature in the first place they would find that a lot of IE
only scripts would work on many other browsers unaltered.

<URL: http://jibbering.com/faq/#FAQ4_39 >
[color=blue]
> }
>
>But I don´t know how many SPAN elements there are,[/color]

Why not, where are they coming from? If they are generated by
server-side processes then you do know how many there are and are in a
position to tell the JScript.
[color=blue]
>so I need to set x to a value big enough to change them all.[/color]

Surly setting - x - to a "big enough" value is of no use at all. It is
the - 20 - that decides how many elements you check, but that is
probably what you mean. If you have a server-script generating the SPAN
elements it should be in a position to write a value in place of that -
20 - based on the number of SPANs included on the page. Unless the
JScript is in a separate static file, but even then the server script
could create a global variable on the page that could be referred to in
place of the - 20 - in the external file.
[color=blue]
>This does, however, produce a error when the function
>tries to set "style.disp lay" on a SPAN that doesn´t exist.[/color]

It would.
[color=blue]
>So I need to check if the SPAN element does exist before I
>try to set it´s "style.display" .
>
>for (var x = 1; x < 20; x++) {
>If (document.all(' mySpan'+x))<--something like this (but that works ;)[/color]

Apart from the parenthesised property access (which usually works on IE)
the only reason for that not working is the initial capital "I " in
the - if - statement. ECMA Script, being case sensitive, would take that
as an identifier and treat the expression as an attempt to execute a
function referred to by that identifier. Erroring because there probably
is no - If - variable.

if(document.all['mySpan'+x]){
... // it exists! (or at least, whatever it refers
// to type-converts to boolean true, which should
// be the same thing where properties of the
// document.all collection are concerned).
}
[color=blue]
>document.all(' mySpan'+x).styl e.display = "inline";
>}
>
>But how do I do this? Help, anyone?[/color]

Because SPAN elements should not have NAME attributes in valid HTML 4
but can have ID attributes it would probably be best to use the ID
attribute (if you are not already). As a result it would be possible to
use the W3C DOM document.getEle mentById method to look up the reference
to the SPAN element using that ID attribute. IE 5.0+ implements the
getElementById method and it is a good habit to use W3C DOM methods
where they are implemented by IE instead of equivalent IE proprietary
features (document.all in this case). As it happens, it appears that IE
implements getElementById so that it looks up the element in the
document.all collection anyway, but habitually preferring the most
widely supported method even when writing exclusively for IE makes
writing cross-browser code easier at a later date.

The "big enough" number strategy doesn't seem like a good idea at all.
The number is going to have to be big enough to account for all possible
numbers of SPAN elements else it will fail, and that means a loop that
does a lot of work and achieves nothing for most of the time when there
are only a small number of SPAN elements.

It would probably be reasonable to - break - the loop as soon as the
first 'mySpan'+x string failed to find a corresponding SPAN (assuming
that the spans are sequentially numbered without interruptions). But
then a - for - loop might not be the best option, probably a - while -
loop would be better suited to the situation.

var spanEl, count = 1;
while(spanEl = document.getEle mentById('mySpa n' + count++)){
spanEl.style.di splay = 'inline';
}

- would start with "mySpan1" and keep going until it could not find
"mySpan"+n.

Richard.

**Mike** · Jul 20 '05, 01:33 PM

Re: How to check if a named SPAN element exists (IE)?

Wow,
Thanks a lot for that long and very indepth answer Richard!!

Really appreciate it - again, thx.

/Mike

[color=blue][color=green]
> >I´ve got a number of SPAN elements named "mySpan1", "mySpan2",
> >"mySpan3" etc,[/color]
>
> When you say "named" do you mean they have NAME attributes? The NAME
> attribute is not valid on SPAN elements according to the HTML 4 DTDs.
> But as the example strings conform to the requirements of an ID
> attribute and ID attributes are valid on all elements, it would make
> sense to be using an ID attribute.
>[color=green]
> >and want to set their "style.disp lay" to "inline".[/color]
>
> The default display property of a SPAN element is "inline", but maybe
> you have pre-set them to "none" in the CSS.
>[color=green]
> > This works (only needs to work on IE5.5+):[/color]
>
> Intranet or broken by design (in the sense that there is nothing here
> that would prevent this form being implemented 100% successfully on
> every modern dynamic visual browser (and then some))? It is often
> helpful to go into the context in which you are working when asking
> questions here.
>[color=green]
> > for (var x = 1; x < 20; x++) {
> > document.all('m ySpan'+x).style .display = "inline";[/color]
>
> IE blurs the distinction between objects and function when dealing with
> host objects and method. Native code method report that they or "object"
> when tested with the typeof operator and DOM elements and collections
> appear to accept property look-ups in the form of parameterised function
> calls. But the document.all collection is best thought of as an object,
> and so references to named properties of that object should use the
> standard ECMA Script (which JScript claims to be an implementation of)
> square bracket notation property accessor syntax:-
>
> document.all['mySpan'+x].style.display = "inline";
>
> It is difficult to say why IE allows parenthesise to be used in place of
> property accessors to achieve the same task. It might be an attempt to
> make scripting easier for people who don't really understand what they
> are doing (tolerate what would be errors in other, stricter,
> environments). But habitually using parentheses instead of square
> brackets when accessing DOM object properties is one of the things that
> makes IE centred script authors convinced that cross-browser scripting
> is harder than it really is. If they had just learnt to use the proper
> language feature in the first place they would find that a lot of IE
> only scripts would work on many other browsers unaltered.
>
> <URL: http://jibbering.com/faq/#FAQ4_39 >
>[color=green]
> > }
> >
> >But I don´t know how many SPAN elements there are,[/color]
>
> Why not, where are they coming from? If they are generated by
> server-side processes then you do know how many there are and are in a
> position to tell the JScript.
>[color=green]
> >so I need to set x to a value big enough to change them all.[/color]
>
> Surly setting - x - to a "big enough" value is of no use at all. It is
> the - 20 - that decides how many elements you check, but that is
> probably what you mean. If you have a server-script generating the SPAN
> elements it should be in a position to write a value in place of that -
> 20 - based on the number of SPANs included on the page. Unless the
> JScript is in a separate static file, but even then the server script
> could create a global variable on the page that could be referred to in
> place of the - 20 - in the external file.
>[color=green]
> >This does, however, produce a error when the function
> >tries to set "style.disp lay" on a SPAN that doesn´t exist.[/color]
>
> It would.
>[color=green]
> >So I need to check if the SPAN element does exist before I
> >try to set it´s "style.display" .
> >
> >for (var x = 1; x < 20; x++) {
> >If (document.all(' mySpan'+x))<--something like this (but that works ;)[/color]
>
> Apart from the parenthesised property access (which usually works on IE)
> the only reason for that not working is the initial capital "I " in
> the - if - statement. ECMA Script, being case sensitive, would take that
> as an identifier and treat the expression as an attempt to execute a
> function referred to by that identifier. Erroring because there probably
> is no - If - variable.
>
> if(document.all['mySpan'+x]){
> ... // it exists! (or at least, whatever it refers
> // to type-converts to boolean true, which should
> // be the same thing where properties of the
> // document.all collection are concerned).
> }
>[color=green]
> >document.all(' mySpan'+x).styl e.display = "inline";
> >}
> >
> >But how do I do this? Help, anyone?[/color]
>
> Because SPAN elements should not have NAME attributes in valid HTML 4
> but can have ID attributes it would probably be best to use the ID
> attribute (if you are not already). As a result it would be possible to
> use the W3C DOM document.getEle mentById method to look up the reference
> to the SPAN element using that ID attribute. IE 5.0+ implements the
> getElementById method and it is a good habit to use W3C DOM methods
> where they are implemented by IE instead of equivalent IE proprietary
> features (document.all in this case). As it happens, it appears that IE
> implements getElementById so that it looks up the element in the
> document.all collection anyway, but habitually preferring the most
> widely supported method even when writing exclusively for IE makes
> writing cross-browser code easier at a later date.
>
> The "big enough" number strategy doesn't seem like a good idea at all.
> The number is going to have to be big enough to account for all possible
> numbers of SPAN elements else it will fail, and that means a loop that
> does a lot of work and achieves nothing for most of the time when there
> are only a small number of SPAN elements.
>
> It would probably be reasonable to - break - the loop as soon as the
> first 'mySpan'+x string failed to find a corresponding SPAN (assuming
> that the spans are sequentially numbered without interruptions). But
> then a - for - loop might not be the best option, probably a - while -
> loop would be better suited to the situation.
>
> var spanEl, count = 1;
> while(spanEl = document.getEle mentById('mySpa n' + count++)){
> spanEl.style.di splay = 'inline';
> }
>
> - would start with "mySpan1" and keep going until it could not find
> "mySpan"+n.
>
> Richard.
>
>[/color]

How to check if a named SPAN element exists (IE)?

How to check if a named SPAN element exists (IE)?

Comment

Comment