Getelementsbyclassname() Doesn't Work in Old Internet Explorers Like IE6, IE7, IE8

getElementsByClassName() doesn't work in old Internet Explorers like IE6, IE7, IE8

This solution may help. This is a custom getElementsByClassName function implemented in pure javascript, that works in IE.

Essentially what this script is doing is probing, one by one, all possible options and picks the best one available. These options are:

1. Native document.getElementsByClassName function.
2. document.evaluate function, which allows evaluation of XPath queries.
3. Traversing the DOM tree.

Of course the first one is the best performance-wise, however the latter should be available everywhere including IE 6.

Usage example, which is also available on the page, looks like this:

getElementsByClassName("col", "div", document.getElementById("container")); 

So the function allows 3 parameters: class (required), tag name (optional, searches for all tags if not specified), root element (optional, document if not specified).

Update. The solution linked in the blog post is hosted on the Google Code which is shutting down in Jan 2016. However the author has made it available on GitHub. Kudos to flodin pointing this out in the comments.

getElementsByClassName doesn't work on IE6. What am I doing wrong?

I don't know to tag the correct answer, but this is what fixed it,

From: @Phil - I imagine you'd have a little trouble with document.getElementsByClassName (minimum IE support is v9). Use the jQuery selector instead, eg $('.namount')

issue with running js on Internet Explorer

It depends on what Internet Explorer you are testing your code. As you can see IE9 and higher versions support that method. Document.getElementsByClassName() on MDN

Some one has also suggest a workaround here: getElementsByClassName() doesn't work in old Internet Explorers like IE6, IE7, IE8

javascript document.getElementsByClassName compatibility with IE

It's not a method of document:

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}

tabs = getElementsByClassName(document.body,'tab');  // no document

getElementsByClassName in ie8

Here is a quick solution by extending the Element.prototype and the document:

(function() {
if (!document.getElementsByClassName) {
    var indexOf = [].indexOf || function(prop) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] === prop) return i;
        }
        return -1;
    };
    getElementsByClassName = function(className, context) {
        var elems = document.querySelectorAll ? context.querySelectorAll("." + className) : (function() {
            var all = context.getElementsByTagName("*"),
                elements = [],
                i = 0;
            for (; i < all.length; i++) {
                if (all[i].className && (" " + all[i].className + " ").indexOf(" " + className + " ") > -1 && indexOf.call(elements, all[i]) === -1) elements.push(all[i]);
            }
            return elements;
        })();
        return elems;
    };
    document.getElementsByClassName = function(className) {
        return getElementsByClassName(className, document);
    };

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

It's not always, however, the best idea to extend the prototype object, especially with a function named exactly like a non-existent native function. If you want to escape the problems caused by extension of the prototype, use this code:

(function() {
    var indexOf = [].indexOf || function(prop) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] === prop) return i;
        }
        return -1;
    };
    window.getElementsByClassName = function(className,context) {
        if (context.getElementsByClassName) return context.getElementsByClassName(className);
        var elems = document.querySelectorAll ? context.querySelectorAll("." + className) : (function() {
            var all = context.getElementsByTagName("*"),
                elements = [],
                i = 0;
            for (; i < all.length; i++) {
                if (all[i].className && (" " + all[i].className + " ").indexOf(" " + className + " ") > -1 && indexOf.call(elements,all[i]) === -1) elements.push(all[i]);
            }
            return elements;
        })();
        return elems;
    };
})();​

That way, you can safely use a getElementsByClassName() function that accepts two arguments:

1. className: the CSS class
2. context: the node

getElementsByClassName Iexplorer compatibility

I would forget about .getElementsByClassName() and stick with .querySelectorAll(), which works very similarly to jQuery selectors. Works perfectly in IE8 with CSS2 selectors:

var elements = document.querySelectorAll('.myClass');

You can create your own reusable selector from it too:

var $$ = function (selector) {
    return document.querySelectorAll(selector);
};

// usage
$$('#id');
$$('.className');
$$('[attributes]');

Javascript IE and getElementsByClassName problems

Personally, I would just use jQuery, as it already has the browser-compatability problems you are running into.

It's all fine to learn it all; but when it comes to handling implementation compatability it's better to have it dealt with for you, IMHO. There are just some things I don't care about :P

IE 11: Object doesn't support property or method 'getElementsByClassName'

The fix is as follows:

<meta http-equiv="X-UA-Compatible" content="IE=11" />

---

Related Topics