Override Native Javascript Function

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.

Why wouldn't you use a real shim (polyfill) instead? That is: if(!Element.prototype.getElementsByClassName) { Element.prototype.getElementsByClassName = function () {...}; } polyfilljs.com/polyfills/getelementsbyclassname.html — Matt Ball
– Matt Ball, Commented May 14, 2012 at 1:57
You are confused, getElementsByClassName is a host method, not a native method. — RobG
– RobG, Commented May 14, 2012 at 3:26
@MattBall—do not use this method. You can't expect to be able to modify host objects or methods in this way (research why Prototype.js dropped it as a strategy). And if attempted, you should at least include thorough feature testing. — RobG
– RobG, Commented May 14, 2012 at 3:27
I guess I was a little confused. None the less, I need the function which is why I am attempting a cross browser solution. — ryandlf
– ryandlf, Commented May 14, 2012 at 3:59

ryandlf · Accepted Answer · 2012-05-14 02:23:33Z

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

answered May 14, 2012 at 2:23

ryandlf

28.7k37 gold badges114 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

RobG Over a year ago

That isn't a particularly good solution since many browsers don't implement a prototype inhertiance scheme for DOM objects (often the ones that don't have getElementsByClassName). It also lacks suitable feature detection, which is essential.

Matt Ball Over a year ago

You should take a second look at how the polyfill actually works. polyfilljs.com/js/mylibs/getelementsbyclassname.js

ryandlf Over a year ago

@RobG Do you have a better solution you wouldn't mind sharing?

ryandlf Over a year ago

Is how I was originally doing it the best way?

RobG Over a year ago

Write a simple function that provides the same functionality. If you can't do that (it should take less than an hour, including testing and documentation), there are plenty of examples on the web.

Collectives™ on Stack Overflow

Override Native Javascript Function

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related