Pequeña ayuda con getElementsByTagName

Jamati · #1 (**permalink**) 18/06/2008, 10:39

Hola muchachos:

Tengo el siguiente código:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
ul {margin:0;padding:0;} 
li {list-style:none;}
ul.menu li:hover, ul.menu li.over {background:#FF0000;}
</style>
</head>
<body>
<script type="text/javascript">
startList = function() {
 if (document.all&&document.getElementsByTagName) {
   navRoot = document.getElementsByTagName('ul').className="menu";
   for (i=0; i<navRoot.childNodes.length; i++) {
     node = navRoot.childNodes[i];
     if (node.nodeName=="LI") {
       node.onmouseover=function() {
         this.className+=" over";
       }
       node.onmouseout=function() {
         this.className=this.className.replace(" over", "");
       }
     }
   }
 }
}
window.onload=startList;
</script>
  <ul class="menu">
    <li>aaaaaa</li>
    <li>bbbbbb</li>
  </ul>
</body>
</html>

En FF funciona perfecto, pero en IE no, no hace nada.
El problema está en esta línea:
navRoot = document.getElementsByTagName('ul').className="men u";

Ya que si en vez de getElementsByTagName uso el getElementById y le pongo <ul id="menu"> sí funciona.

Pero yo no quiero usar ID, sino clases... como hago ??
Es sencillo lo que pregunto ??

JavierB · #2 (**permalink**) 18/06/2008, 10:44

Hola Jamati

Prueba asi:

Código:

navRoot = document.getElementsByTagName('ul')[0].className = "menu";

Saludos,

Jamati · #3 (**permalink**) 18/06/2008, 13:12

Gracias JavierB, pero lamentablemente no me funcionó ...

Adjunto el código con la modificación que me dijiste:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
ul {margin:0;padding:0;} 
li {list-style:none;}
ul.menu li:hover, ul.menu li.over {background:#FF0000;}
</style>
</head>
<body>
<script type="text/javascript">
startList = function() {
 if (document.all&&document.getElementsByTagName) {
   navRoot = document.getElementsByTagName('ul')[0].className="menu";
   for (i=0; i<navRoot.childNodes.length; i++) {
     node = navRoot.childNodes[i];
     if (node.nodeName=="LI") {
       node.onmouseover=function() {
         this.className+=" over";
       }
       node.onmouseout=function() {
         this.className=this.className.replace(" over", "");
       }
     }
   }
 }
}
window.onload=startList;
</script>
  <ul class="menu">
    <li>aaaaaa</li>
    <li>bbbbbb</li>
  </ul>
</body>
</html>

derkenuke · #4 (**permalink**) 18/06/2008, 14:01

Hola Jamati:

Creo que tienes un problema en

Código PHP:

  navRoot = document.getElementsByTagName('ul')[0].className = "menu";

Esa línea es equivalente a esta en cuestión de efectos para lo que queda de código:

Código PHP:

  navRoot = "menu";

Significa que navRoot es de tipo String, y no tiene childNodes ni nada de eso.

Saludos.

JavierB · #5 (**permalink**) 18/06/2008, 14:10

¡Oops! es verdad. He añadido [0] al código y no me he dado cuenta de más.

Gracias derkenuke

Saludos,

Jamati · #6 (**permalink**) 19/06/2008, 14:52

Gracias, tanto derkenuke como JavierB

Mi codigo quedó así:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
ul {margin:0;padding:0;} 
li {list-style:none;}
ul.menu li:hover, ul.menu li.over {background:#FF0000;}
</style>
</head>
<body>
<script type="text/javascript">
startList = function() {
 if (document.all&&document.getElementsByTagName) {
   //navRoot = document.getElementsByTagName('ul').className="menu";
   navRoot = "menu";
   for (i=0; i<navRoot.childNodes.length; i++) {
     node = navRoot.childNodes[i];
     if (node.nodeName=="LI") {
       node.onmouseover=function() {
         this.className+=" over";
       }
       node.onmouseout=function() {
         this.className=this.className.replace(" over", "");
       }
     }
   }
 }
}
window.onload=startList;
</script>
  <ul class="menu">
    <li>aaaaaa</li>
    <li>bbbbbb</li>
  </ul>
</body>
</html>

pero sigue sin funcionar el javascript en IE, en FF funciona bien el cambio de color en el <li>, pero en Explorer no quiere funcionar... y eso que puse lo que me dijeron ustedes....

Saludos y muchas gracias nuevamente.

derkenuke · #7 (**permalink**) 19/06/2008, 15:21

Bueno, de hecho no sé ni por qué te funciona en FF.

Mira, debes asignale primero a navRoot:

Código PHP:

  navRoot = document.getElementsByTagName('ul')[0];

Y luego debes darle el className que quieras:

Código PHP:

  navRoot.className="menu";

Pero tienen que ser dos pasos diferentes (dos instrucciones).

Así sí te funcionará.

Saludos.

Jamati · #8 (**permalink**) 20/06/2008, 07:17

Gracias derkenuke:

Ahora sí funcionó perfecto. Problema solucionado gracias a ustedes.

Saludos!!

Jamati · #9 (**permalink**) 29/06/2008, 16:27

Gente, ahora me surgió un nuevo problema:

Este es mi codigo:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
ul {margin:0;padding:0;} 
li {list-style:none;}
ul.menu li:hover, ul.menu li.over {background:#FF0000;}
</style>
</head>
<body>
<script type="text/javascript">
startList = function() {
  if (document.all&&document.getElementsByTagName) {
    navRoot = document.getElementsByTagName('ul')[0];
    navRoot.className="menu";
    for (i=0; i<navRoot.childNodes.length; i++) {
      node = navRoot.childNodes[i];
      if (node.nodeName=="LI") {
        node.onmouseover=function() {
          this.className+=" over";
        }
        node.onmouseout=function() {
          this.className=this.className.replace(" over", "");
        }
      }
    }
  }
}
window.onload=startList;
</script>
  <ul class="sobra">
    <li>UL SOBRA</li>
    <li>UL SOBRA</li>
  </ul>
  <ul class="menu">
    <li>UL MENU</li>
    <li>UL MENU</li>
  </ul>
</body>
</html>

el cual funciona perfecto, pero si agrego más <ul> con cualquiera otra clase, el javascript me lo toma solo para el primer UL que encuentre... y según puedo entender con el javascript que puse, que supeustamente eso lo tendría que aplicar al UL con clase "menu"... como hago ?

Gracias nuevamente.

ivangc · #10 (**permalink**) 30/06/2008, 08:46

Es normal, solo estás cogiendo el elemento 0 de la colección de tags encontrados:
navRoot = document.getElementsByTagName('ul')[0];

Debes hacer un bucle para recorrer toda la coleccion y no quedarte solo en el primero:
var elements = document.getElementsByTagName('ul');
var j;
for (j=0; j < elements.length; j++)
{
navRoot = document.getElementsByTagName('ul')[j];
navRoot.className="menu";
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
Sería algo así, no lo he probado pero para que te hagas una idea...

Jamati · #11 (**permalink**) 30/06/2008, 09:40

Ok, lo pruebo y luego te aviso.

Muchas gracias.

Jamati · #12 (**permalink**) 30/06/2008, 11:30

Otro gran problema !!!

Este es mi codigo:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
ul.menu li.primera:hover, ul.menu li.primera.over {background:#FF0000;}
ul.menu li.segunda:hover, ul.menu li.segunda.over {background:#E5E5E5;}
</style>
</head>
<body>
<script type="text/javascript">
startList = function() {
  if (document.all&&document.getElementsByTagName) {
    navRoot = document.getElementsByTagName('ul')[0];
    navRoot.className="menu";
    for (i=0; i<navRoot.childNodes.length; i++) {
      node = navRoot.childNodes[i];
      if (node.nodeName=="LI") {
        node.onmouseover=function() {
          this.className+=" over";
        }
        node.onmouseout=function() {
          this.className=this.className.replace(" over", "");
        }
      }
    }
  }
}
window.onload=startList;
</script>
  <ul class="menu">
    <li class="primera">UL MENU</li>
    <li class="segunda">UL MENU</li>
  </ul>
</body>
</html>

En FF funciona perfecto, quiere decir que la primer fila se pone roja y la segunda gris, pero en IE solo me toma el gris. Como que el Javascript no asinga bien el over teniendo en cuenta la clase que ya tenía.

Me entiendo ?

Bueno, desde ya muchas gracias por sus respuestas.

PD: ivangc, el problema que te comenté antes lo solucioné en vez de poner [0] le puse la posición que ocupaba dicho UL en la página, como iba a estar en un encabezado, simpre será el tercer UL que aparezca en la página, por eso le puse [2]

Jamati · #13 (**permalink**) 30/06/2008, 15:03

alguna ayuda ?

MaBoRaK · #14 (**permalink**) 30/06/2008, 15:50

loading....................

reemplaza esto

Código PHP:

          node.onmouseout=function() { 
                   this.className=this.className.replace(" over", "");

por

Código PHP:

          node.onmouseout=function() { 
                   this.className=this.className.split(" ")[0];

veremos si funciona :D

connection closed.

ivangc · #15 (**permalink**) 30/06/2008, 15:53

He hestado probando tu script y la verdad que no entiendo muy bien el comportamiento del explorerm ya que el código está correcto. Lo unico que puedo aportar como una posible solución (si no encuentras otra) es modificar el estilo del li 'al vuelo' con la propiedad style: this.style.color = "#FF0000". Pero bueno, no es una buena solución.

Saludos.

Cita:

Iniciado por Jamati

alguna ayuda ?

Jamati · #16 (**permalink**) 30/06/2008, 20:04

Gracias por las respuesta. Paso a comentar:

MaBoRaK:
No me funcionó poniendo "this.className=this.className.split(" ")[0];"
en IE sigue funcionando mal.

ivangc:
Esa solución podría ser, pero en verdad este codigo que puse es un ejemplo, ya que en verdad necesito otra cosa, pero resolviendo esto usando dicho javascript podré solucionar mi problema.

Gracias a todos y espero que alguien sepa ayudarme.

Saludos

ivangc · #17 (**permalink**) 01/07/2008, 00:17

Yo si fuese tu miraría mejor la parte de CSS del explorer, ya que no es un problema de javascript, que funciona correctamente, si no un problema de renderizado del navegador. Suerte :)

Cita:

Iniciado por Jamati

Gracias por las respuesta. Paso a comentar:

MaBoRaK:
No me funcionó poniendo "this.className=this.className.split(" ")[0];"
en IE sigue funcionando mal.

ivangc:
Esa solución podría ser, pero en verdad este codigo que puse es un ejemplo, ya que en verdad necesito otra cosa, pero resolviendo esto usando dicho javascript podré solucionar mi problema.

Gracias a todos y espero que alguien sepa ayudarme.

Saludos

Jamati · #18 (**permalink**) 01/07/2008, 07:54

Medio raro entonces, porque yo también analizando el javascript me puedo dar cuenta que supuestamente debería funcionar bien... pero el CSS también está bien... entonces no sé que hacer.

Veremos si alguien con más conocimientos nos puede dar una mano.

Saludos y gracias.

derkenuke · #19 (**permalink**) 01/07/2008, 08:30

Hola de nuevo:

Sí, es un fallo de CSS:

Código PHP:

  ul.menu #primera:hover, ul.menu #primera.over {background:#FF0000;}
ul.menu #segunda:hover, ul.menu #segunda.over {background:#E5E5E5;}

Y en el HTML

Código HTML:

 <ul class="menu">
    <li id="primera">UL MENU</li>
    <li id="segunda">UL MENU</li>
  </ul>

Si alguien puede explicar el error me gustaría conocerlo, porque he hecho muchas pruebas y no he llegado a entenderlo.

Lo que sí sé es que en el código original IE sólo toma como buena (y válida para los dos LI) la última sentencia CSS, le da igual que sea .primera que .segunda.

Saludos.

Jamati · #20 (**permalink**) 01/07/2008, 08:53

Gracias derkenuke.

Lo probé como dijiste y funciona perfecto. Lastima que ya tenía toda mi clase puesta con CLASS y me da intriga tener que cambiar por un ID. Me hubiese gustado tener otra solución así solamente modificaba el CSS... pero por lo visto el maldito IE hace lo que quiere.

Si alguien tiene otra ayuda se lo agradeceré mucho.
Nuevamente muchas gracias derkenuke.

Saludos

Mikmoro · #21 (**permalink**) 01/07/2008, 09:40

En IE6 no funciona la concatenación de clases .clase1.clase2 (clase1 y clase2), tomando sólo la última de estas en la declaración. Por lo tanto, creo que tendrías que cambiar un poco de estrategia con algo como esto:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
ul.menu li.primera:hover, ul.menu li.primera_over {background:#FF0000;}
ul.menu li.segunda:hover, ul.menu li.segunda_over {background:#E5E5E5;}
</style>
</head>
<body>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementsByTagName) {
navRoot = document.getElementsByTagName('ul')[0];
navRoot.className="menu";
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+="_over";
}
node.onmouseout=function() {
this.className=this.className.replace("_over", "");
}
}
}
}
}
window.onload=startList;
</script>
<ul class="menu">
<li class="primera">UL MENU</li>
<li class="segunda">UL MENU</li>
</ul>
</body>
</html>

Mikel.

Jamati · #22 (**permalink**) 01/07/2008, 10:10

Sin palabras. Justamente esa solución andaba buscando.
No tengo que cambiar nada, solo el Javascript y el archivo de CSS.

Que te puedo decir Mikel?, muchísimas gracias. Lo probé y funciona perfecto.

Saludos.

derkenuke · #23 (**permalink**) 01/07/2008, 10:16

Me lo esperaba Mikmoro, sospechaba que por ahí iban los tiros.

Gracias por aclararlo. Además buena solución.

Saludos!

Mikmoro · #24 (**permalink**) 01/07/2008, 11:45

De nada, es un placer. Era más sencillo de lo que parecía.

Mikel.