alguien me puede explicar getElementsByClassName

jor_0203 · #1 (**permalink**) 04/12/2011, 18:50

estoy tratando de entender como se usa getElementsByClassName pero he encontrado ejemplos muy complejos.
ustedes no tiene por ahí un ejemplo muy sencillo o una pagina donde explique bien y haya muchos ejemplos.
mil gracias

zerokilled · #2 (**permalink**) 04/12/2011, 19:39

buenas,
¿alguna vez has usado getElementsByTagName o getElementsByName? ¡pues es lo mismo con getElementsByClassName! el método devuelve una colección de elementos por la clase que hayas indicado al invocarla. un simple ejemplo.

Código:

var myClass = document.getElementsByClassName('myClass');

<p class="myClass"></p>
<span class="myClass"></span>
<div class="myClass"></div>

en ese ejemplo obtienes todos los elementos con class="myClass". nota importante, puede darse el caso que te encuentres con navegadores que no tienen nativamente dicho método. en estos casos debes realizar una función que realice el mismo trabajo. probablemente eso fue lo que viste y te parecio complejo.

jor_0203 · #3 (**permalink**) 04/12/2011, 20:22

Cita:

Iniciado por zerokilled

buenas,
¿alguna vez has usado getElementsByTagName o getElementsByName? ¡pues es lo mismo con getElementsByClassName! el método devuelve una colección de elementos por la clase que hayas indicado al invocarla. un simple ejemplo.

Código:

var myClass = document.getElementsByClassName('myClass');

<p class="myClass"></p>
<span class="myClass"></span>
<div class="myClass"></div>

en ese ejemplo obtienes todos los elementos con class="myClass". nota importante, puede darse el caso que te encuentres con navegadores que no tienen nativamente dicho método. en estos casos debes realizar una función que realice el mismo trabajo. probablemente eso fue lo que viste y te parecio complejo.

saludos lo con tu ejemplo que me diste, te pregunto esto esta correcto o esta mal
y una pregunta yo lo use en explorer y en mozilla pero que pasa con los de navegadores
esto no lo soportan
mil gracias por tu apoyo

Código Javascript:

Ver original<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
    background-color: #FFFFCC;
}
.myClass{ background-color: #FF3333;  
 
 
}
-->
</style></head>
<body>
<script language="JavaScript">
 var myClass = document.getElementsByClassName('myClass');
</script>
<p class="myClass">xxxxxxxxxx</p>
<span class="myClass">cccccccc</span>
<br>
<div class="myClass">ccccccccc</div>
</body>
</html>

zerokilled · #4 (**permalink**) 04/12/2011, 20:46

Cita:

con tu ejemplo que me diste, te pregunto esto esta correcto o esta mal

en términos teórico el código esta bien. en términos prácticos no funcionaría. de hecho, funciona -en el sentido de que no genera error- pero no produce el resultado esperado. pues primero se esta ejecutando el javascript y luego se crean los elementos. por tanto, la variable contendrá una colección vacia. debes invertir el orden, primero cargar los elementos y luego capturarlos.

Cita:

y una pregunta yo lo use en explorer y en mozilla pero que pasa con los de navegadores
esto no lo soportan

pues simplemente el código no funcionaría y se genera error. esto se debe a que el navegador no tiene definida la función getElementsByClassName. como antes indique, la resolución a ese aspecto es crear una función similar en cuanto a funcionamiento. en la web hay ejemplos de códigos que imitan dicha función, inclusive en el foro se han presentado códigos. busca por términos similares a getelmentsbyclassname implementation.