getElementsByClassName() en IE8

oscard41 · #1 (**permalink**) 04/04/2013, 10:54

Buenas tardes, actualmente estoy programando una web en la que uso repetidas veces la funcion getElementsByClassName() de javascript y ahora es que me vengo a dar cuenta que esa funcion no anda en IE 8 y sus versiones anteriores:S mi pregunta es como podria simular dicha funcion para estas versiones de IE?

a los que me puedan ayudar muchas gracias de ante mano

maycolalvarez · #2 (**permalink**) 04/04/2013, 11:04

lo mejor que puedo recomendarte es jQuery, pero tienes que refactorizar

oscard41 · #3 (**permalink**) 04/04/2013, 12:29

Cita:

Iniciado por maycolalvarez

lo mejor que puedo recomendarte es jQuery, pero tienes que refactorizar

disculpa me podrias dar algun ejemplo sencillo de como se usaria en jquery?

emprear · #4 (**permalink**) 04/04/2013, 18:37

función auxiliar en js puro para detección de clases en IE<9

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
 
<script type="text/javascript">
//<![CDATA[
 
//versiones IE < 9
/*  Descomentar este bloque para probar la funcion que_clases() en spam "verifica"
window.onload=function(){
if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className){
        var tieneClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
        var todosLosElementos = document.getElementsByTagName("*");
        var resultados = [];
        var elementos;
        for (var i = 0; (elementos = todosLosElementos[i]) != null; i++) {
            var elementoClase = elementos.className;
            if (elementoClase && elementoClase.indexOf(className) != -1 && tieneClassName.test(elementoClase))
                resultados.push(elementos);
        }
        return resultados;
    }
}
}
*/
 
// variante, ver si un elemento tiene una clase específica
function tieneClase(ele,cls) {
  return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
 
 
function tc(e,c){
if(tieneClase(e,c)){
alert('Este elemento tiene clase ' + c);
}else{
alert('Este elemento no tiene clase ' + c);
}
}
 
 
function que_clases(){
var a = document.getElementsByClassName('a');
var b = document.getElementsByClassName('b');
var c = document.getElementsByClassName('c');
var ac = document.getElementsByClassName('a c');
var ca = document.getElementsByClassName('c a');
alert('texto de primer elemento con clase a = ' + a[0].innerHTML);
alert('texto de primer elemento con clase b = ' + b[0].innerHTML);
alert('texto de segundo elemento con clase c = ' +c[1].innerHTML);
alert('texto de primer elemento con clase a c = ' +ac[0].innerHTML);
alert('texto de tercer elemento con clase c a = ' +ca[2].innerHTML);
}
//]]>
</script>
</head>
<body>
<div>
<span style="cursor: pointer;" onclick="que_clases();"><b>Verificar</b></span>
<p class="a b c">texto</p>
<p class="a c">texto 2</p>
<p class="a b">texto 3</p>
<p class="a comentario" onclick="tc(this,'comentario')">texto 4</p>
<p class="c a">texto 5</p>
</div>
<div>
<pre>
 
&lt;p class=&quot;a b c&quot;&gt;texto&lt;/p&gt;
&lt;p class=&quot;a c&quot;&gt;texto 2&lt;/p&gt;
&lt;p class=&quot;a b&quot;&gt;texto 3&lt;/p&gt;
</pre>
</div>
</body>
</html>

Edito:
Por las dudas, ya que recibí varios comentarios al respecto, el sentido del código de ejemplo es probarlo en IE8 (si tienen IE9 F12 y cambiar a modo IE8)

SAludos