getElementsByName in IE7

Question

I have some code doing this :

 var changes = document.getElementsByName(from);
 for (var c=0; c<changes.length; c++) {
   var ch = changes[c];
   var current = new String(ch.innerHTML);
   etc.
 }

This works fine in FF and Chrome but not in IE7. Presumably because getElementsByName isn't working in IE. What's the best workaround?

Answer 1

Workaround

                var listOfElements = document.getElementsByName('aName'); // Replace aName with the name you're looking for
            // IE hack, because it doesn't properly support getElementsByName
            if (listOfElements.length == 0) { // If IE, which hasn't returned any elements
                var listOfElements = [];
                var spanList = document.getElementsByTagName('*'); // If all the elements are the same type of tag, enter it here (e.g.: SPAN)
                for(var i = 0; i < spanList.length; i++) {
                    if(spanList[i].getAttribute('name') == 'aName') {
                        listOfElements.push(spanList[i]);
                    }
                }
            }

Answer 2

Just another DOM bug in IE:

Bug 1: http://webbugtrack.blogspot.com/2007/08/bug-411-getelementsbyname-doesnt-work.html

Bug 2: http://webbugtrack.blogspot.com/2008/04/bug-403-another-getelementsbyname-bugs.html

Answer 3

It's not very common to find elements using the NAME property. I would recommend switching to the ID property.

You can however find elements with a specific name using jQuery:

 $("*[name='whatevernameYouWant']");

this will return all elements with the given name.

Answer 4

getElementsByName is supported in IE, but there are bugs. In particular it returns elements whose ‘id’ match the given value, as well as ‘name’. Can't tell if that's the problem you're having without a bit more context, code and actual error messages though.

In general, getElementsByName is probably best avoided, because the ‘name’ attribute in HTML has several overlapping purposes which can confuse. Using getElementById is much more reliable. When specifically working with form fields, you can more reliably use form.elements[name] to retrieve the fields you're looking for.

Answer 5

There are a couple of problems:

1. IE is indeed confusing id="" with name=""
2. name="" isn't allowed on <span>

To fix, I suggest:

1. Change all the name="" to class=""
2. Change your code like this:

-

var changes = document.getElementById('text').getElementsByTagName('span');
for (var c=0; c<changes.length; c++) {
 var ch = changes[c];

 if (ch.className != from)
continue;

 var current = new String(ch.innerHTML);

Answer 6

In case you don't know why this isn't working in IE, here is the MSDN documentation on that function:

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

Elements that support both the NAME attribute and the ID attribute are included in the collection returned by the getElementsByName method, but elements with a NAME expando are not included in the collection; therefore, this method cannot be used to retrieve custom tags by name.

Firefox allows getElementsByName() to retrieve elements that use a NAME expando, which is why it works. Whether or not that is a Good Thing™ may be up for debate, but that is the reality of it.

So, one option is to use the getAttribute() DOM method to ask for the NAME attribute and then test the value to see if it is what you want, and if so, add it to an array. This would require, however, that you iterate over all of the nodes in the page or at least within a subsection, which wouldn't be the most efficient. You could constrain that list beforehand by using something like getElementsByTagName() perhaps.

Another way to do this, if you are in control of the HTML of the page, is to give all of the elements of interest an Id that varies only by number, e.g.:

<div id="Change0">...</div>
<div id="Change1">...</div>
<div id="Change2">...</div>
<div id="Change3">...</div>

And then have JavaScript like this:

// assumes consecutive numbering, starting at 0
function getElementsByModifiedId(baseIdentifier) {
    var allWantedElements = [];
    var idMod = 0;
    while(document.getElementById(baseIdentifier + idMod)) { // will stop when it can't find any more
        allWantedElements.push(document.getElementById(baseIdentifier + idMod++));
    }
    return allWantedElements;
}

// call it like so:
var changes = getElementsByModifiedId("Change");

That is a hack, of course, but it would do the job you need and not be too inefficient compare to some other hacks.

If you are using a JavaScript framework/toolkit of some kind, you options are much better, but I don't have time to get into those specifics unless you indicate you are using one. Personally, I don't know how people live without one, they save so much time, effort and frustration that you can't afford not to use one.