Question

Specifically I would like to override the getElementsByClassName function that is available in every browser except IE. IE uses a querySelectorAll instead.

Element.prototype.getElementsByClassName = function(className) {
    if(document.getElementsByClassName) {
        return this.getElementsByClassName(className);
    } else if(document.querySelectorAll) {
        return this.querySelectorAll(className);
    }
};

But when running the code in Firefox, it uses the native function instead. Will this still work as a cross browser solution and use my prototype instead if the getElementsByClassName is not available, or is there a way to override the native function so my code is used everytime? I can name the prototype a similar name, but for ease of readability, id prefer to keep it the same.

Answer 1

I just wanted to add Matt Ball’s answer as a true accepted answer to this question. As he mentioned, its best to use a polyfill instead of the way I originally had it set up.

if(!Element.prototype.getElementsByClassName) {
    Element.prototype.getElementsByClassName = function(className) {
        return this.querySelectorAll(className);
    }
}