IE vs. NS regarding getElementsByName()

[Claudio]

Hi,

I need your input....

The following (Option 1) doesn't work in IE6 - I get "Item is undefined" error.

The following (Option 2) works in NS but not in IE. IE doesn't retrieve the object. I will be using this instead of Option 1 cause I will have multiple tags with the same name so I can easily change properties for each.


Code (Option 1):

<span name="Item1">Some text...</span>

<script>

Item1.style.display = "none";

</script>


Code: (Option 2):

<span name="Item1">Some text...</span>

<script>

var e1 = document.getElementsByName("Item1");

if (document.all)
{e1.style.display = "none";}
else
{e1.item(0).style.display = "";}

</script>



I hope someone can help me out with this.

[TrueLies]

good question, easy answer: apparently, doesn't work (at least with that syntax) on IE.

Anyway remove the whole expression:
<script>
Item1.style.display = "none";
</script>

for that's uncorrect and works nowhere: Item1 can't be used a s a rference to an object, for in itslef its just a name you gave to something, not an object identifier

GetElementsByName
syntax for NN:

http://www.mozilla.org/docs/dom/domref/dom_doc_ref49.html

syntax for IE:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/getelementsbyname.asp

but apparently doens't work on IE, althouhg both claim they know/accept the syntax. I'm surprised at an apparent shortcoming by IE5 anyway.
Microsoft shows this example:

<SCRIPT>
function fnGetNames(){
// Returns a collection with 2 INPUT type=text elements.
var aInput=document.getElementsByName("firstName");
}
</SCRIPT>
<INPUT TYPE="text" NAME="firstName">
<INPUT TYPE="text" NAME="firstName">
<INPUT TYPE="button" VALUE="Get Names" onclick="fnGetNames()">

It is a relatively useless one if you don't change it to:

<SCRIPT>
function fnGetNames(){
// Returns a collection with 2 INPUT type=text elements.
var aInput=document.getElementsByName("firstName");
return aInput; /*hey guys it has to return or nest an alert, or proves NOTHING!*/
}
</SCRIPT>
<form>
<INPUT TYPE="text" NAME="firstName">
<INPUT TYPE="text" NAME="firstName">
<INPUT TYPE="button" VALUE="Get Names" onclick="alert( fnGetNames() )">
</form> <!--the form tag microsoft guys...-->

Now such alret holds: object.
Uhmmmmmm.... wasn't declared a "collection"?
"Returns a collection of objects with the same NAME attribute value."
So the method does soemthing for it returns an object, but this object is NOT an array for you can't retrieve by item() as Claudio noticed, none the less, try this:

<SCRIPT>
function fnGetNames(){
// Returns a collection with 2 INPUT type=text elements.
var aInput=document.getElementsByName("firstName");
alert(aInput.length+"\n\n"+aInput[0].style.color+"\n"+aInput.item(0).style.color)
}
</SCRIPT>
<form>
<INPUT TYPE="text" NAME="firstName" style="color:#999999">
<INPUT TYPE="text" NAME="firstName">
<INPUT TYPE="button" VALUE="Get Names" onclick="fnGetNames()">
</form>

it works PERFECTLY.

Now, change the inputs to spans

<SCRIPT>
function fnGetNames(){
// Returns a collection with 2 INPUT type=text elements.
var aInput=document.getElementsByName("firstName");
alert(aInput.length+"\n\n"+aInput[0].style.color+"\n"+aInput.item(0).style.color)
}
</SCRIPT>
<form>
<span NAME="firstName" style="color:#999999">one</span>
<span NAME="firstName">two</span>
<INPUT TYPE="button" VALUE="Get Names" onclick="fnGetNames()">
</form>

It does NOT work any longer!

The collection is not built anylonger, althouhg data type is still object:

Evidence:

<SCRIPT>
function fnGetNames(){
// Returns a collection with 2 INPUT type=text elements.
var aInput=document.getElementsByName("firstName");
alert(aInput.length+"\nit has a length=0 as you see")
}
</SCRIPT>
<form>
<span NAME="firstName" style="color:#999999">one</span>
<span NAME="firstName">two</span>
<INPUT TYPE="button" VALUE="Get Names" onclick="fnGetNames()">
<form>

uhmmm...

[jkd]

I've never had any problems in either browser with

document.getElementsByName('nodeName').item(X)

where X is the index of the named item.

[Claudio]

Hummm... Ya!

Hi,


It is definitley a MS BS thing.

If you do the following it works:

(Change the name="??" to ID="??")

Code:

<span id="Item1">Some Text...</span>






Therefore,

I'm required to change the tag attribute to 'ID' if browser is IE and to 'name' for all others.

Kinda sloppy... Hummm.

[mordred]

From the microsoft page:

When you use the getElementsByName method, all elements in the document that have the specified NAME or ID attribute value are returned.

Elements that support both the NAME and the ID attribute are included in the collection returned by the getElementsByName method, but not elements with a NAME expando.

Which, to my own astonishment, leaves the impression that Microsoft actually implemented that function quite near to what w3c recommendations imply: That a <span> element mustn't have a name attribute - and thus it gets treated as an expando property, and not retrieved.

Claudio, you can always assign id attributes to <span> elements and retrieve them in IE5+ and NS6+ with document.getElementById("idString"). Or you could assign them the same CSS class and manipulate the CSS definitions for that particular class (which I don't know right out of the mind to do, but wouldn't be hard to research in the references).

[Claudio]

...

Hi,

Well mordred,

I discovered that with using CSS that I could not get the proper effect that I was looking for. Instead I had to use style.display = "" or "none".

Here's what I was trying to achieve:

In a quesy to the Database for product, the query would return product detail including pricing. Now I'm adding the feature of currency conversion. I do the conversion automatically and hide the results when user queries DB. Then by user pressing a button of something, the units will swap, thus the hiding/showing method.

Now, to have this replace in the same position, I had to use style.display because CSS won't do that.

That has been my experience, I could be wrong / missing something.

Cheers,

Thank you to all who have been nice enough to contribute to a solution.

[BrainJar]

getElementsByName() and getElementsByTagName() return an array of element objects - there can be more than one element with the same name attribute or tag name.

You need to use an array index to access a single element in the array:

<span name="Item1">...</span>
<span name="Item1">...</span>
<span name="Item1">...</span>
...
var elList = document.getElementsByName("Item1");

//Hide the first "Item1" span.
elList[0].style.display = "none"; 

//Hide the second "Item1" span.
elList[1].style.display = "none";

If you plan to give each tag a unique name value, you may as well use id instead. getElementById() returns a single element object so this works:

<span id="Item1">...</span>
...
//Hide the one and only "Item1" span.
var el = document.getElementsById("Item1");
el.style.display = "none";

[jkd]

Originally posted by BrainJar
getElementsByName() and getElementsByTagName() return an array of element objects

Read: "NodeList"
Which is more than an array, it is an object defined in the W3C DOM Core...

The W3C specs define the only way to access nodes in the NodeList is through the item() method, but all browsers which support the DOM allow array indexing as well. I personally prefer using item(), to each his own though.

[TrueLies]

Hi

like mordred said, it is that way: Microsoft accepts to scan names by getElementsByName only if the tag was since javaScript inceptions, so to say, a tag that allowed for a name property, discarding all the rest (quite puzzling, given the fact the IE4++ engine has always been characterized by being able to address almost every object).
An adjunctive evidence:

<SCRIPT>
function fnGetNames(){
// Returns a collection with 2 INPUT type=text elements.
var aInput=document.getElementsByName("firstName");
alert(aInput.length+"\n\n"+aInput[0].style.color+"\n"+aInput.item(0).style.color)
}
</SCRIPT>
<form>
<img src="foo.jpg" style="color:#000000" name="firstName">
<INPUT TYPE="text" NAME="firstName" style="color:#999999">
<INPUT TYPE="text" NAME="firstName">
<INPUT TYPE="button" VALUE="Get Names" onclick="fnGetNames()">
</form>

whereas the tag IMG accepts name, and in fact gets read by item() !
In other words, for spans use
getElementById()

too bad, I know... but instructive anwyay, we learned something relevant with a rarely used syntax: getElementsByName. We didn't waste our time.

ciao