[javaEScript] Formato a objeto document

Hari Seldon hari.seldon.developer en gmail.com
Lun Sep 11 02:45:08 PDT 2006


	Uhmm..

	Si te pasas por un par de blogs, por ejemplo, por quirsmode (1), se
puede ver que NO siempre es la mejor opción trabajar con el DOM directamente
a la hora de crear nodos.. Al menos, con los navegadores actuales

	Un saludo

(1) http://www.quirksmode.org/dom/innerhtml.html 

> -----Mensaje original-----
> De: javaescript-bounces en scriptia.net 
> [mailto:javaescript-bounces en scriptia.net] En nombre de Choan C. Gálvez
> Enviado el: lunes, 11 de septiembre de 2006 2:07
> Para: Hanlle Nicolas
> CC: javaescript en scriptia.net
> Asunto: Re: [javaEScript] Formato a objeto document
> 
> Hola Hanlle. Te respondo más abajo...
> 
> > gracias..pero mi pregunta es si tambien..es posible darle 
> esas mismas
> > etiquetas pero en el archivo externo es decir...por ejemplo digamos
> > que tengo una pagina "home.html" que posee el siguiente codigo
> >
> > <html>
> > <head>
> > <title>ejemplo</title>
> > <SCRIPT type="text/javascript" href="script.js">
> > </head>
> >
> >
> > y en un archivo externo .js tengo lo siguiente
> >
> > document.write ("Nombre:pepito  Apellido: gmail");
> > </hml>
> >
> > ok..es esto entonces mi pregunta es quiero darle el formato a la
> > salida pero desde este arhivo .js...es imposible hacerlo??..desde el
> > html se que si..pero quiero saber como hacerlo pero externamente...o
> > por lo menos si a este archivo externo aplicarle estilos CSS que eso
> > si creo que no se podria de esta forma =)...de antemano gracias..y
> > muchas gracias jose...
> 
> Seré tajante: estás utilizando un estilo pasado de moda XD
> 
> Olvida los `document.write`, no hacen felices a nadie. Olvida también
> el concepto de formato. Change your mind. Piensa en DOM.
> 
> Lo que vamos a hacer es manipular el árbol del documento. Ese árbol de
> documento se compone de _nodos_, y los nodos se representan en
> pantalla aplicando hojas de estilo.
> 
> Te dejo una lecturita, puedes echarlo un vistazo ahora o después del
> pedazo de rollo que te voy a soltar: Introducción al Modelo de Objetos
> de Documento (DOM) [1]
> 
> [1]: http://kusor.net/traducciones/brainjar.es/introdom1.es.html
> 
> Empecemos por crear una estructura de elementos razonable. Esos pares
> de nombre/valor, me suenan a lista de definición:
> 
> <dl>
> <dt>Nombre</dt>
>   <dd>Choan</dd>
> <dt>Apellido</dt>
>   <dd>Gálvez</dd>
> </dl>
> 
> 
> Ok, vamos a crear esos nodos vía DOM:
> 
> var dl = document.createElement("dl");
> var dt = document.createElement("dt");
> dt.appendChild(document.createTextNode("Nombre"));
> dl.appendChild(dt);
> var dd = document.createElement("dd");
> dd.appendChild(document.createTextNode("Choan"));
> dl.appendChild(dd);
> // etc.
> 
> Bueno, bueno, bueno. Ahora en la variable `dl` tenemos un nodo que
> contiene algunos nodos hijos. Pero para pintarlo en pantalla debemos
> incluirlo en el documento. Supongamos que lo vamos a colocar como
> primer hijo del `div` con `id="holder"`:
> 
> var holder = document.getElementById("holder");
> holder.insertBefore(dl, holder.firstChild);
> 
> Un último detalle: este código no se puede ejecutar hasta que el nodo
> que amigablemente hemos llamado `holder` exista en el árbol del
> documento. Por tanto, ejecutaremos nuestro código cuando se complete
> la carga del documento:
> 
> window.onload = function(e) {
>     // toda la brasa de antes
> };
> 
> Como despedida, y como provocación a los puristas, he aquí la forma
> "guarra" de obtener el mismo resultado.
> 
> window.onload = function(e) {
>     var holder = document.getElementById("holder");
>     var h = "<dl><dt>Nombre</dt><dd>Choan</dd></dl>";
>     holder.innerHTML = h + holder.innerHTML;
> }
> 
> Rápida, efectiva. Sucia.
> 
> En cuanto a lo del formato... dejemos que se pinte en pantalla como le
> indiquen nuestras hojas de estilo.
> 
> Salud.
> -- 
> Choan
> <http://choangalvez.nom.es/>
> 
> Dizque. Desarrollo web y pequeñas dosis de vida real
> <http://dizque.lacalabaza.net>
> 
> Mundo Du. Cuentos breves, relatos sorprendentes
> <http://du.lacalabaza.net/>
> 
> Scriptia. Javascript y buenas prácticas
> <http://scriptia.net/>
> _______________________________________________
> javaEScript mailing list
> javaEScript en scriptia.net
> http://lists.scriptia.net/listinfo.cgi/javaescript-scriptia.net



Más información sobre la lista de distribución javaEScript