getElementsByName is not working in IE

JavaScript
1

Hi,

I just tried the following code in IE and mozila. In mozila it’s correctly returning the number of div elements with name “gallery”. but in IE it is zero. can anyone tell my why this is happening.

following is the code wich i tried…



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Test Page</title>
<script type="text/javascript">
function addEvent()
{
	var  gDivList = document.getElementsByName("gallery");
	alert(gDivList.length);
}
</script>
</head>
<div class="leftnavgallery" name="gallery">&nbsp;</div>
<div class="leftnavgallery" name="gallery">&nbsp;</div>
<div class="leftnavgallery" name="gallery">&nbsp;</div>
<div class="leftnavgallery" name="gallery">&nbsp;</div>
<div class="leftnavgallery" name="gallery">&nbsp;</div>
<div class="leftnavgallery" name="gallery">&nbsp;</div>
<div class="leftnavgallery" name="gallery">&nbsp;</div>
<div class="leftnavgallery" name="gallery">&nbsp;</div>
<div class="leftnavgallery" name="gallery" >&nbsp;</div>
<div class="leftnavgallery" name="gallery">&nbsp;</div>
<div class="leftnavgallery" name="gallery">&nbsp;</div>
<div class="leftnavgallery" name="gallery">&nbsp;</div>
<div class="leftnavgallery" name="gallery">&nbsp;</div>
<div class="leftnavgallery" name="gallery">&nbsp;</div>
<div class="leftnavgallery" name="gallery">&nbsp;</div>
<div class="leftnavgallery" name="gallery">&nbsp;</div>
<div class="leftnavgallery" name="gallery">&nbsp;</div>
<div class="leftnavgallery" name="gallery">&nbsp;</div>
<div class="leftnavgallery" name="gallery">&nbsp;</div>
<script type="text/javascript">addEvent();</script>
</body>
</html>
2

I still get confused about how different browsers treat "name"s and "id"s, but shouldn’t an element’s name be unique?

EDIT:
I just did as bit of searching and found examples both at w3schools and MSDN that had multiple tags with the same name. So I guess it must be something else causing a problem.

3

The <body> tag is missing so the HTML is not valid. Maybe that is the cause.

4

Name is only valid on input elements, not div elements. Thus, IE only searches for inputs.

5

:d’oh: I didn’t notice the missing body tag.
And, although both examples say “all elements with” they do both show input tags in the example code. Maybe it would be better to use XPath and a regex with some kind of valid attribute values instead?

6

the body tag is present in the original source… it is missed when i am copy paste the necessarily tags to site point editor… it is not working still if there is a body tag. and i think Fotiman’s comment is true… i dint find any other problem in it.

7

You could use the Yahoo UI Library to get elements by name. Like so:


<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript">
var gDivList = YAHOO.util.Dom.getElementsBy(function(el) {
    return (el.getAttribute("name") == "gallery");
});
</script>

I haven’t tested it, but it should work.

8

With the original code, you don’t want to go naming multiple attributes as you have done. If you want an array of the elements, I would do it with a single identifier instead, which keeps the code a lot cleaner.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Test Page</title>
<script type="text/javascript">
function addEvent()
{
	var el = document.getElementById("gallery");
	var gDivList = el.getElementsByTagName('div');
	alert(gDivList.length);
	console.log(gDivList);
} 
</script>
</head>
<body>
<div id="gallery">
    <div class="leftnavgallery">&nbsp;</div>
    <div class="leftnavgallery">&nbsp;</div>
    <div class="leftnavgallery">&nbsp;</div>
    <div class="leftnavgallery">&nbsp;</div>
    <div class="leftnavgallery">&nbsp;</div>
    ...
</div>
<script type="text/javascript">addEvent();</script>
</body>
</html>

The class name should also be moved up to the surrounding div, and because the id and class are used only on the same element, you can use just the id attribute instead. If there are multiple areas that share the same design, then a class can be used to distinguish between the two.

The inner div’s should also use a more semantic tag, such as a paragraph, but that depends on how you are going to structure the content.


<div id="leftnavgallery" class="gallery">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    ...
</div>

Then you can use CSS selectors to target the appropriate elements


#leftnavgallery {
    width: 5em;
}
#leftnavgallery p {
    margin: 0.5em;
}
.gallery {
    color: #f00; /* harsh red */
    background-color: #0f0; /* virulent green */
}

Well, maybe not those colors, but these things can be considered for later.