JavaScript JS – Array of all elements of a given class name – Legacy Access of Element Class

Perhaps you’re a JavaScript purist like myself. Or, maybe your JavaScript project is so small that including a library like jQuery would be overkill. If so, your project will sometimes need core functions to make your script a bit more tidy.

This particular bit of legacy code allows you to create arrays of elements with a given class name – a function that is not supported in some older browsers. You can keep things simple and just use this function, or you can simply use it to fall back on if a particular browser does not support other methods such as getElementsByClassName or querySelectorAll.

The core function is below:

function classArray(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;
}

This classArray()  function should be invoked after the content is loaded. Either insert it below the targeted HTML or with an event listener on load. In the example below, we use this function as a fall back option only if the browser does not support more advanced options:

if (document.getElementsByClassName) var myClassArray document.getElementsByClassName('myClass');
else if (document.querySelectorAll) var myClassArray document.querySelectorAll('.myClass');
else var myClassArray = classArray(document.body,'myClass');

After you have created your array, you will probably want to execute some code on your array of elements. Well you’re in luck, I’ve already done the work for you. The function below can be used to run your array through a loop to execute your code:

function classEx(className, func) {
    for (var i = 0; i < className.length; i++) {
        if (i in className) {
            func(className[i]);
        }
    }
}

If you need to reference your custom code more than once, you can invoke the classEx()  function like this:

classEx(myClassArray,myFunction); 

function myFunction(x){
  //do something
}

or… you can keep it simple and compressed.

classEx(myClassArray,function(x){/*do something*/});

You can also find this code on GitHub and JSFiddle.

Well, that’s it. If you found this script helpful, please share it with one of the social icons below. Thanks!