JavaScript getElementById function overload

Question

I have a problem with old website. All JavaScript code on it use getElemenById function. But tags of site markup doen't have id property, instead they have only name property. Although it still works for IE, browser returns elements even by name property. For all other browsers it's a mistake in JS. I wonder if there any way to overload this function in other browser to make web site compatible to other browsers?

It would probably be better to fix the code so it works properly rather than try and hack the method to work differently on other browsers. You can use the `getElementsByName` method to find elements by name, although this returns an array as name is not expected to be unique like ID. — Richard Dalton, Jul 28 '11 at 07:40

score 12 · Accepted Answer · answered Jul 28 '11 at 07:39

There's no way to "overload" a function in JavaScript in the sense that you would do so in a strongly-typed language like Java or C. In fact, every function in JavaScript is already overloaded in this sense in that you can call any function with any number and type of arguments.

What you can do, however, is insert your own proxy in front of the existing version, and implement the proxy with whatever behavior you prefer. For instance:

document._oldGetElementById = document.getElementById;
document.getElementById = function(elemIdOrName) {
    var result = document._oldGetElementById(elemIdOrName);
    if (! result) {
        var elems = document.getElementsByName(elemIdOrName); 
        if (elems && elems.length > 0) {
            result = elems[0];
        }
    }

    return result;
};

For people coming here because they receive `Illegal target invocation`, the trick is to backup the `getElementById` function to the document object itself and then it can access it (which is exactly how this post does it). — tresf, Dec 13 '18 at 19:22

score 1 · Answer 2 · answered Jul 28 '11 at 07:40

I wouldn't count on overriding getElementById working properly. Sounds easy enough to do a search and replace that does something like this:

// Replace
document.getElementById("foo");
// With
myGetElementById("foo", document);

// Replace
myElement.getElementById("foo");
// With
myGetElementById("foo", myElement);

Then you can myGetElementById as you want, without worrying about what might happen in old IEs and what not if you override getElementById.

score 1 · Answer 3 · answered Jul 28 '11 at 07:42

1

Try getElementsByName. This is used to get a collection of elements with respect to their name

answered Jul 28 '11 at 07:42

Hasan Fahim

3,875
1
30
51

Thank you. I know that, but for this old web site is to much of work. I just nee an workaround. – Johnny_D Jul 28 '11 at 07:53

JavaScript getElementById function overload

3 Answers3

Linked