DOMTool: Crea código DOM a partir de HTML

DOOMTool es una interesante herramienta para aquellos que se estén iniciando en AJAX y el proceloso mundo de la arquitectura DOM. La herramienta sirve para convertir el código HTML a DOM.

Las aplicaciones son múltiples. Desde insertar texto de un modo similar al método innerHTML a crear nuevos bloques elementos dentro de una web. De este modo podremos ahorrarnos bastante tiempo escribiendo manualmente largas estructuras DOM.

Vamos a realizar un ejemplo bastante sencillo para ver su uso. Supongamos que deseamos que cuando se pulse un botón deseamos que aparezca un nuevo bloque con una imagen y un texto. El código de lo que deseamos crear sería algo como:

<div style="width:300px;height:100px;font-size:11px;background-color:#CCC;">  
<img src="http://www.webintenta.com/wp-content/uploads/2007/08/franjas1.jpg" 
style="float:left;margin-right:15px;" />  
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  
</div>

(Perdón por la utilización de estilos en línea pero es que el ejemplo queda un poco más visual y no se complica en demasía)

A continuación accedemos a la herramienta y pegamos este código en el textarea dedicado al código HTML. Pulsamos el botón “Create DOM Statements”. Con ello obtendremos como salida el código DOM necesario:

var div1=document.createElement('div');  
div1.style.width="300px";  
div1.style.height="100px";  
div1.style.fontSize="11px";  
div1.style.backgroundColor="rgb(204, 204, 204)";  
var img1=document.createElement('img');  
img1.style.cssFloat="left";  
img1.style.marginRight="15px";  
img1.setAttribute('src','franjas1.jpg');  
div1.appendChild(img1);  
var txt2=document.createTextNode('Lorem ipsum dolor sit amet, 
  consectetuer adipiscing elit.n');  
div1.appendChild(txt2);

Así como los nodos que deberemos anexar. En este caso únicamente div1.

Ahora únicamente nos quedaría crear una función, que al ser ejecutado, anexase el contenido creado mediante DOM donde deseemos. En mi caso he creado una función llamada pruebaDOM y anexo el contenido dentro de un div denominado ContDOM. El ejemplo completo quedaría:

<html>  
<head>  
<title>PRUEBA DOMTOOL</title>  
<script language="javascript">  
  function pruebaDOM(){     
  //CODIGO GENERADO POR DOMTOOL     
    var div1=document.createElement('div');     
	div1.style.width="300px";     
	div1.style.height="100px";     
	div1.style.fontSize="11px";     
	div1.style.backgroundColor="rgb(204, 204, 204)";     
	var img1=document.createElement('img');     
	img1.style.cssFloat="left";     
	img1.style.marginRight="15px";     
	img1.setAttribute('src','franjas1.jpg');     
	div1.appendChild(img1);     
	var txt2=document.createTextNode('Lorem ipsum dolor sit amet, 
	  consectetuer adipiscing elit.n');     
	div1.appendChild(txt2);     
	
	//ANEXAMOS EL CONTENIDO     
	var t = document.getElementById('ContDOM');     
	t.appendChild(div1);  
  } 
</script>  
<div id="ContDOM">  
  <a href="javascript:pruebaDOM();">Ejecutar DOM</a>  
</div>  
</body>  
</html>

Este es sólo una pequeña muestra de lo que podemos realizar con DOM, muy utilizado en aplicaciones AJAX, y que con esta herramienta tendremos una potente ayuda.

Autor: webintenta.com
http://www.webintenta.com/

Usuarios que han visto este tema también han visto...

- Variables en Javascript
- MozAfterPaint, evento para controlar los cambios en la página
- Pasando datos entre paginas con JavaScript
- Cabecera siempre visible con Javascript DHTML
- Jerarquia Javascript

- Versión imprimible de este documento

- Enviar por e-mail este documento