4

Tenho isso :

<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" />

e estou tentando recuperar elementos pela classe porém no IE8 nao funciona o comando :

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

tentei usar o :

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

No chrome funciona porém no IE8 ainda n está funcionando.

1
  • 2
    Cade a classe verdana14 e toAdd no seu codigo html?
    – Joao Paulo
    Commented 18/02/2014 às 14:25

2 Respostas 2

3

Para compatibilidade com navegadores mais antigos, deve-se criar uma rotina para isso.

A seguinte foi feita com base nesta questão:

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;
}

Exemplo de uso:

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

JSFiddle

Note que o "seletor" pode contar apenas o nome de uma classe. Para recuperar elementos que contenham exatamente 2 classes, por exemplo, poderíamos ajustar o método para receber dois nomes de classes ou executá-lo duas vezes e fazer uma intersecção dos resultados.

Vejamos outro exemplo com um seletor que aceita múltiplas 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;
}

Exemplo de uso:

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

JSFiddle

2
  • 2
    ~descaradamente copiada~. Eu ri. Quanto a resposta, essa solução aí é elegante para um navegado não tão elegante assim Commented 18/02/2014 às 14:32
  • 1
    Concordo que o IE não seja elegante, apenas o Firefox é elegante, pois ele é uma raposa e raposas são elegantes, ainda mais raposas de fogo. - porém gostei da solução +1 Commented 18/02/2014 às 14:33
3

Use o seguinte no IE 8:

document.querySelectorAll('.destino');

Segundo a documentação no IE8 funciona apenas para seletores simples tal como este acima. Se você usar o seletor 'input.destino' por exemplo já deve dar problema.

Veja esse link http://quirksmode.org/dom/core/#t13

Outra alternativa é criar um 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;
  }
}

Eu sempre prefiro criar um Polyfill pois posso colocar no meu HTML uma referencia ao arquivo JS que implementa a funcionalidade e todo o resto do meu código funciona da forma padrão e assim posso simplesmente ignorar o polyfill nos Browser modernos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .