getElementsByName in IE7

by

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.

More Related Contents:

  1. How to pass arguments to addEventListener listener function?
  2. Changing website favicon dynamically
  3. Check if element is visible in DOM
  4. Dynamically set value of a file input [duplicate]
  5. Why don’t we just use element IDs as identifiers in JavaScript?
  6. getElementsByClassName() doesn’t work in old Internet Explorers like IE6, IE7, IE8
  7. How to append text to a “?
  8. Difference between “change” and “input” event for an `input` element
  9. Setting innerHTML vs. setting value with Javascript
  10. What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery
  11. What is my script src URL?
  12. javascript access parent DOM across domains?
  13. Using querySelectorAll to retrieve direct children
  14. Accessing the content of other tabs in a browser
  15. Is there a way to select sibling nodes?
  16. How to detect when an iframe has already been loaded
  17. How do I put codes from jsfiddle.net into my website?
  18. JavaScript: How to get parent element by selector?
  19. Screen Scraping from a web page with a lot of Javascript [closed]
  20. What is better, appending new elements via DOM functions, or appending strings with HTML tags?
  21. Attach event listener through javascript to radio button
  22. Check whether HTML element has scrollbars
  23. Why is React’s concept of Virtual DOM said to be more performant than dirty model checking?
  24. Convert String to XML Document in JavaScript
  25. Why doesn’t Node.js have a native DOM?
  26. Is there a way to get innerText of only the top element (and ignore the child element’s innerText)?
  27. IE support for DOM importNode
  28. How to prevent an iframe from reloading when moving it in the DOM
  29. What’s the difference between a jQuery object and a DOM element? Difference between .get() and .index()?
  30. In web browsers, what’s the difference between onblur and onfocusout?

Leave a Comment