getElementsByClassName () não funciona em antigos Internet Explorer como o IE6, IE7, IE8

O seguinte código:

var borderTds = document.getElementsByClassName('leftborder'); 

me dá uma mensagem de erro no Internet Explorer 6, 7 e 8:

Objeto não suporta este método

Como posso selecionar elementos por sua class nesses navegadores?

Eu prefiro não usar o JQuery.

Essa solução pode ajudar. Esta é uma function getElementsByClassName customizada implementada no javascript puro, que funciona no IE.

Essencialmente, o que este script está fazendo é sondar, uma por uma, todas as opções possíveis e escolher a melhor disponível. Essas opções são:

  1. Função native document.getElementsByClassName .
  2. document.evaluate function, que permite a avaliação de consultas XPath.
  3. Atravessando a tree DOM.

É claro que o primeiro é o melhor desempenho, no entanto, o último deve estar disponível em todos os lugares, incluindo o IE 6.

O exemplo de uso, que também está disponível na página, se parece com isto:

 getElementsByClassName("col", "div", document.getElementById("container")); 

Então a function permite 3 parâmetros: class (obrigatório), tag name (opcional, procura por todos os tags se não forem especificados), root (opcional, document se não for especificado).

Atualizar. A solução vinculada na postagem do blog está hospedada no Google Code, que será encerrado em janeiro de 2016. No entanto, o autor a disponibilizou no GitHub . Muitos elogios para flodin apontando isso nos comentários.

IE6, Netscape 6+, Firefox e Opera 7+ copiam o seguinte script em sua página:

 document.getElementsByClassName = function(cl) { var retnode = []; var elem = this.getElementsByTagName('*'); for (var i = 0; i < elem.length; i++) { if((' ' + elem[i].className + ' ').indexOf(' ' + cl + ' ') > -1) retnode.push(elem[i]); } return retnode; }; 

O método não existe no IE6. Se você quiser selecionar elementos por class e não quiser usar uma biblioteca, basta percorrer todos os elementos da página e verificar a class em sua propriedade className .

 function getElementsByClassName(className) { var found = []; var elements = document.getElementsByTagName("*"); for (var i = 0; i < elements.length; i++) { var names = elements[i].className.split(' '); for (var j = 0; j < names.length; j++) { if (names[j] == className) found.push(elements[i]); } } return found; } 

Demonstração: http://jsfiddle.net/kYdex/1/

O Internet Explorer 8 e getElementsByClassName() mais antigas não suportam getElementsByClassName() . Se você só precisa de uma solução para o IE8, ele suporta querySelectorAll() , você pode usar um deles. Para IEs mais antigos, você precisa fornecer sua própria implementação e, para alguns outros navegadores antigos que o suportam, também é possível usar evaluate() que executa expressões XPath.

Este código fornece um método document.getElementsByClassName se ainda não existir usando os methods que descrevi:

 if (!document.getElementsByClassName) { document.getElementsByClassName = function(search) { var d = document, elements, pattern, i, results = []; if (d.querySelectorAll) { // IE8 return d.querySelectorAll("." + search); } if (d.evaluate) { // IE6, IE7 pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]"; elements = d.evaluate(pattern, d, null, 0, null); while ((i = elements.iterateNext())) { results.push(i); } } else { elements = d.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; } } 

Se você não gosta de algo sobre isso, você pode usar seu mecanismo de busca favorito para encontrar um diferente.

Se getElementsByClassname não suporta erro em alguns navegadores antigos Simplesmente tente var modal = document.getElementById (‘myModal’); modal.onclick = function () {Então faça qualquer function onclick ou outra function usando getElementById modal.style.display = “none”; }