Retrieve elements by class in IE8 with pure JS

For compatibility with older browsers, you should create a routine for this.

The following was done based on in this question :

function findByClass(matchClass) {
    var elems = document.getElementsByTagName('*');
    var resp = [];
    for (var i = 0; i < elems.length; i++) {
        if((" "+elems[i].className+" ").indexOf(" "+matchClass+" ") > -1) {
            resp.push(elems[i]);
        }
    }
    return resp;
}

Example usage:

var elementos = findByClass("crazy");
for (var i = 0; i < elementos.length; i++) {
    console.log(elementos[i].innerHTML);
}

JSFiddle

Note that the "selector" can only count the one class name. To retrieve elements that contain exactly 2 classes, for example, we could adjust the method to receive two class names or run it twice and intersect the results.

Let's look at another example with a selector that accepts multiple classes:

function findByClass(classes) {
    var elems = document.getElementsByTagName('*');
    var matches = classes.split(' ');
    var resp = [];
    pula:
    for (var i = 0; i < elems.length; i++) {
        for (var j = 0; j < matches.length; j++) {
            if((" "+elems[i].className+" ").indexOf(" "+matches[j]+" ") < 0) {
                continue pula;
            }
        }
        resp.push(elems[i]);
    }
    return resp;
}

Example usage:

var elementos = findByClass("crazy one");
for (var i = 0; i < elementos.length; i++) {
    console.log(elementos[i].innerHTML);
}

JSFiddle

Use the following in IE8:

document.querySelectorAll('.destino');

According to the documentation in IE8 it only works for simple selectors such as the above. If you use the 'input.destino' selector for example it should already give you a problem.

See this link link

Another alternative is to create a Polyfill

if (!document.getElementsByClassName) {
  document.getElementsByClassName = function(search) {
    var doc = document, elements, pattern, i, results = [];
    if (doc.querySelectorAll) { // IE8
      return doc.querySelectorAll("." + search);
    }
    if (doc.evaluate) { // IE6, IE7
      pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
      elements = doc.evaluate(pattern, doc, null, 0, null);
      while ((i = elements.iterateNext())) {
        results.push(i);
      }
    } else {
      elements = doc.getElementsByTagName("*");
      pattern = new RegExp("(^|\s)" + search + "(\s|$)");
      for (i = 0; i < elements.length; i++) {
        if ( pattern.test(elements[i].className) ) {
          results.push(elements[i]);
        }
      }
    }
    return results;
  }
}

I always prefer to create a Polyfill because I can put in my HTML a reference to the JS file that implements the functionality and all the rest of my code works the standard way so I can simply ignore the polyfill in Modern browsers.