How do I select all elements using same class name in javascript. I know i can do it using document.getElementsByClassName but I read somewhere that it's not cross browser so if it is true what is the appropriate way to select elements depending on class name without jQuery or other library.

Thanks!

How do I select all elements using same class name in javascript. I know i can do it using document.getElementsByClassName but I read somewhere that it's not cross browser so if it is true what is the appropriate way to select elements depending on class name without jQuery or other library.

Thanks!

• javascript

• 2 Believe me when I say you are not the first person to ask this question... google.co.uk/search?q=select+by+class+name+javascript – Matt Commented Apr 29, 2012 at 20:45
• 1 @Raj give querySelectorAll() a try, it's better and more flexible than getElement...() – Christoph Commented Apr 29, 2012 at 21:01

3 Answers 3

I found this code:

if (!document.getElementsByClassName) {
    document.getElementsByClassName = function(classname) {
        var elArray = [];
        var tmp = document.getElementsByTagName("*");
        var regex = new RegExp("(^|\\s)" + classname + "(\\s|$)");
        for (var i = 0; i < tmp.length; i++) {

            if (regex.test(tmp[i].className)) {
                elArray.push(tmp[i]);
            }
        }

        return elArray;
    };
}​

Here

see here:

Support for getElementsByClassName

I remend using querySelector. It's more natural and pretty close to the jQuery Syntax, thus more mon to most ppl. Also it's pretty fast and you don't need to distinguish between classes, ids or whatever.

If you want to Support IE<7, you need a shim like gdoron provided.

It may be better to use document.querySelector or document.querySelectorAll, supported since IE8.

Have a look here:

https://developer.mozilla/docs/Web/API/document.querySelector https://developer.mozilla/docs/Web/API/document.querySelectorAll