Javascript Getelementbyid Function Overload

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. Alth

Solution 1:

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;
};

Solution 2:

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.

Solution 3:

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