Dom

acoevil · #1 (**permalink**) 04/03/2009, 21:51

Hola quetal estoy aprendiendo javascript y estoy viendo DOM y he llegado a una parte y no entiendo porque no funciona si asi esta en el ejemplo
por ejemplo

tengo mi pagina
por medio de la funcion getElementByTagName quiero acceder a las etiquetas p y logicamente me devolveria un array llamado parrafos con la cantidad de nodos que tenga pero cuando lo muestro en la pagina me sale undefined a que se debe esto???

Js.htm

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta name="author" content="">

	<title>Untitled 1</title>
	
<script type="text/Javascript">
var parrafos=getElementsByTagName("p");
alert(parrafos[0]);




</script>	
	
</head>

<body>
<form action="Js.htm" method="post">
aqui el texto<input type="text" name="texto" onclick="alerta()">
<input type="submit" name="enviar" value="enviar">
</form>

<p>hola como estas</p>
<p>hola como estas</p>


</body>
</html>

jeybi · #2 (**permalink**) 04/03/2009, 22:11

Que bien que te interese.

Primero, getElementsByTagName(), no es una funcion, sino un metodo de document (y de otros elementos). Un metodo es una funcion que esta definida dentro de un objeto, asi la sintaxis vendria siendo:

elemento.getElementsByTagName('tag')

Donde elemento, es un nodo de tipo elemento (parrafos, divisiones, listas) o bien simplemente document, donde se buscaran todas las coincidencias de 'tag', ejemplo:

Código javascript:

Ver originaldocument.getElementsByTagName('p')

Cuando se usa asi, obtiene todos los elementos con tag 'p' dentro del documento.

Por otro lado si quisieramos, por ejemplo, encontrar todos los parrafos dentro del primero div del documento, hariamos algo como:

Código javascript:

Ver originalvar primerdiv = document.getElementsByTagName('div')[0] //Obtenemos el primer div del documento
var parrafos = primerdiv.getElementsByTagName('p') //Obtenemos todos los parros dentro del primer div

El punto de esto es que, no puedes usar getElementsByTagName() asi al vuelo, tienes que llamarla como parte de un objeto(elemento, documento).

acoevil · #3 (**permalink**) 04/03/2009, 22:24

hola quetal que pena es que yo le estaba colocando el document pero aqui no se que paso
la cosa es que con el document a un sigue jodiendo =(

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="">

<title>Untitled 1</title>

<script type="text/Javascript">
var parrafos = document.getElementsByTagName("p");
alert(parrafos[0]);

</script>

</head>

<body>

<p>hola como estas</p>
<p>hola como estas</p>

</body>
</html>

Q pena pero esto deberia de funcionar? jeje

acoevil · #4 (**permalink**) 04/03/2009, 23:05

helpppppppppp jeje

jeybi · #5 (**permalink**) 04/03/2009, 23:58

Mira lo que pasa con tu codigo es que antes de querer usar cualquier metodo/funcion/objeto DOM, tienes que esperar a que la pagina carge. Tu no lo vez, pero tu script se ejecuta tan rapido, que no le da tiempo de cargar ningun elemento de la pagina al navegador. Entonces al buscar los elementos 'p' no encuentra nada.

La solucion es que tu codigo se ejecute cuando el navegador haya terminado de cargar toda la pagina (en general esto se debe hacer siempre), añadiendo un codigo como el siguiente.

Código javascript:

Ver originalwindow.onload = tufuncion;  //Al cargar la pagina, se ejecuta tufuncion, aqui SIN parentesis()
 
 function tufuncion(){ //La funcion la defines donde quieras
 var parrafos = document.getElementsByTagName("p"); //Ya funciona
 alert(parrafos[0]);
 }

Esto es un ejemplo comun, y sirve para cualquier script que utilize DOM. Ya si quieres hacer mas cosas (ejem, diferentes funciones en diferentes archivos javascript) se usa una solucion mas robusta, pero por ahora, con esto bastara.

Recuerda que la funcion que asignes no debe llevar parentesis, por que si no, estarias invocando a la funcion y asignando su valor a window.onload, y eso no es lo que quieres.

Otra forma, mas comun pero mas pesada (hace pesar de cierto modo el HTML) es:

Código html:

Ver original<body onload="mifuncion()" >

Es exactamente igual solo que aqui si lleva parentesis. Te recomiendo que leeas algo sobre esto.

PD: Probablemente quieras sacar el texto del parrafo, ya que si usas alert(parrafo[0]) te saldra un mensaje algo raro, que es equivalente nodo elemento de parrafo(esto lo aprenderas luego). Para sacar 'lo de adentro' puedes usar parrafo[0].innerHTML. Pero ten cuidado ya que si tienes alguna otra etiqueta dentro de <p> (por ejemplo <b></b>) tambien se mostrara. Sacar el texto dentro de una etiqueta(y todas sus etiquetas hijas, por ejemplo <b> o <i>), es de esas cosas que IE hace mal, asi que tendrias que usar una funcion como esta:

Código javascript:

Ver originalfunction sacarTexto(elemento){
    if(elemento.innerText)//IE Style
        return elemento.innerText;
    else if(elemento.textContent) //Standar Style
        return elemento.textContent;    
}

La llamada seria asi:

Código javascript:

Ver originalalert(sacarTexto(parrafos[0]));

caricatos · #6 (**permalink**) 05/03/2009, 01:09

Hola:

Puedes ver como se recorre el DOM con el Nuevo destripador.

Saludos