Retrieve elements by class in IE8 with pure JS

Question

I have it :

<input type="hidden" value="<c:out value='${destino }' />" class="destino" />
<input type="hidden" value="<c:out value='${destino }' />" class="destino" />
<input type="hidden" value="<c:out value='${destino }' />" class="destino" />
<input type="hidden" value="<c:out value='${destino }' />" class="destino" />
<input type="hidden" value="<c:out value='${destino }' />" class="destino" />

and I am trying to recover elements by the class but in IE8 does not work the command :

var elems = document.getElementsByClassName('verdana14 toAdd');

tried to use the :

var elems = document.querySelectorAll('.verdana14.toAdd')

In Chrome works but in IE8 still n is working.

Answer 1

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

The following was made on the basis in this matter:

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 of use:

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

Jsfiddle

Note that the "selector" can count only the name of one class. To retrieve elements containing exactly 2 classes, for example, we could adjust the method to receive two class names or run it twice and make an intersection of 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 of use:

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

Jsfiddle

Answer 2

Use the following in IE 8:

document.querySelectorAll('.destino');

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

See this link http://quirksmode.org/dom/core/#t13

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 one 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 in the standard way and so I can simply ignore polyfill in modern Browser.