62

How do you get all elements by class name using pure JavaScript? Analogous to $('.class') in JQuery?

D M
  • 5,769
  • 4
  • 12
  • 27
Bdfy
  • 23,141
  • 55
  • 131
  • 179
  • http://stackoverflow.com/questions/1933602/how-to-getelementbyclass-instead-of-getelementbyid-with-javascript – silly Feb 24 '12 at 08:02

7 Answers7

74

document.getElementsByClassName(klass)

Be aware that some engines (particularly the older browsers) don't have it. You might consider using a shim, if that's the case. It will be slow, and iterate over the whole document, but it will work.

EDIT several years later: You can get the same result using document.querySelectorAll('.klass'), which doesn't seem like much, but the latter allows queries on any CSS selector, which makes it much more flexible, in case "get all elements by class name" is just a step in what you are really trying to do, and is the vanilla JS answer to jQuery's $('.class').

Amadan
  • 191,408
  • 23
  • 240
  • 301
54

A Simple and an easy way 

var cusid_ele = document.getElementsByClassName('custid');
for (var i = 0; i < cusid_ele.length; ++i) {
    var item = cusid_ele[i];  
    item.innerHTML = 'this is value';
}
kta
  • 19,412
  • 7
  • 65
  • 47
  • 1
    When going forward, the loop will skip every second entry if elements get deleted in the loop. So, better go backwards. (I edited the answer accordingly, pending peer review.) – Bodo Thiesen Dec 08 '16 at 22:50
21
document.getElementsByClassName('your class');

or you can build your classname like this, if that doesn't work try this

if (!document.getElementsByClassName) {
    document.getElementsByClassName=function(cn) {
        var allT=document.getElementsByTagName('*'), allCN=[], i=0, a;
        while(a=allT[i++]) {
            a.className==cn ? allCN[allCN.length]=a : null;
        }
        return allCN
    }
}
Kunal Vashist
  • 2,380
  • 6
  • 30
  • 59
1

In some browsers there is a document.getElementsByClassName(class) function. Otherwise, the only option you have is to iterate over all elements in the document by checking each of it against your condition of having the required class name.

penartur
  • 9,792
  • 5
  • 39
  • 50
1

Several techniques described and speed tested here: http://ejohn.org/blog/getelementsbyclassname-speed-comparison/

graphicdivine
  • 10,937
  • 7
  • 33
  • 59
0

This should work:

function(className)
{
    var matchingItems = [];
    var allElements = document.getElementsByTagName("*");

    for(var i=0; i < allElements.length; i++)
    {
        if(allElements [i].className == className)
        {
            matchingItems.push(allElements[i]);
        }
    }

    return matchingItems;
}
Community
  • 1
  • 1
spinon
  • 10,760
  • 5
  • 41
  • 59
  • Yes but I do not suggest to use it this way, I used try to do something like this and then I got a huge performance issue in IE7, as it running very very slow – Simon Wang Feb 24 '12 at 08:07
  • I agree. There are surely more elegant solutions. I see @Kunal below is using regular expressions which is cleaner as well. I was just providing a quick option so the requestor could get an idea. – spinon Feb 24 '12 at 08:09
  • 1
    This will not work if two classes are applied to the element – Antoine Tissier Jul 04 '13 at 09:51
0

function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all :
        oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];     
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }   
    }
    return (arrReturnElements)
}
Sudhir Bastakoti
  • 99,167
  • 15
  • 158
  • 162
  • This is looks similar to a code snippet in a Site Point book. Just curious if that's the source, or is it just a strange coincidence? – pqsk Mar 12 '14 at 21:31