Dom

caricatos · #1 (**permalink**) 01/09/2004, 12:14

Hola a todos:

Creo que ahora tiene mucha importancia trabajar con el modelo de objetos en javascript, y preparé un par de funciones para insertar/borrar elementos (en las FAQs hay un tema para añadir al final, y ahora implementé algo para hacerlo por delante, aunque faltaría un chequeo que luego explicaré...

Y otra rutina borra elementos (insertBefore y removeChild):

Código:

<html>
	<head>
		<script type="text/javascript">
			function borrarCapa(capa) {
				capa.parentNode.removeChild(capa);
			}

			function crearCapa(id_contenedor, tipo_tag, atributos, estilos, contenido) {
				var los_estilos = estilos.split(",");
				var los_atributos = atributos.split(",");
				var yo = document.createElement(tipo_tag);
				yo.id = "ID_" + Date();
				for (var i = 0; i < los_atributos.length; i ++)
					yo.setAttribute(los_atributos[i].split("=")[0], los_atributos[i].split("=")[1]);
				for (var i = 0; i < los_estilos.length; i ++)
					yo.style[los_estilos[i].split("=")[0]] = los_estilos[i].split("=")[1];
				yo.appendChild(document.createTextNode(contenido));
				siguiente = document.getElementById(id_contenedor).firstChild;
				document.getElementById(id_contenedor).insertBefore(yo, siguiente);
				return yo.id;
			}

			function ini() {
				var capa1 = crearCapa("cuerpo", "div", "align=center,name=pepe", "color=blue,cursor=pointer", "hola");
				with(document.getElementById(capa1).style) {
					display = "block";
//					position = "absolute";
//					top = "0px";
//					left = "0px";
//					width = document.body.clientWidth + "px";
//					height = document.body.clientHeight + "px";
					backgroundImage = "url(../miemoticon.gif)";
					backgroundRepeat = "no-repeat";
					backgroundPosition = "center center";
				}
				document.getElementById(capa1).onclick=function(){borrarCapa(this)};
			}

		</script>
	</head>
	<body id="cuerpo" onload="ini()" >
		<div id="interior" >
			<br />
			<br />
			<br />
			<br />
		</div>
	</body>
</html>

Lo que quedaría por implementar es el control de nodos hijos...

if (hasChildNodes) insertBefor()... else appendChild()...

Bueno... si les parece que veamos el manejo del DOM, creo que podría ser interesante.

Saludos

Carlitos · #2 (**permalink**) 01/09/2004, 13:01

Hola Caricatos.

Instrúyenos.

A ver si este fin de semana actualizo el índice de las faq's, que me faltan las últimas entradas.

Un saludo.

caricatos · #3 (**permalink**) 01/09/2004, 18:52

Hola otra vez:

¿Cómo estás Carlitos? ... ¡Nos tenías un poco olvidados...!

No es mi intención instruir sino compartir... aunque si alguien aprende algo, mejor.

Implementé la función para que sea el primer nodo y no tenga errores (con la otra implementación, podría existir un elemento sin "hijos")...

:

Código:

function crearPrimerTag(id_contenedor, tipo_tag, atributos, estilos, contenido) {
	var los_estilos = estilos.split(",");
	var los_atributos = atributos.split(",");
	var yo = document.createElement(tipo_tag);
	yo.id = "ID_" + Date();
	for (var i = 0; i < los_atributos.length; i ++)
		yo.setAttribute(los_atributos[i].split("=")[0], los_atributos[i].split("=")[1]);
	for (var i = 0; i < los_estilos.length; i ++)
		yo.style[los_estilos[i].split("=")[0]] = los_estilos[i].split("=")[1];
	yo.appendChild(document.createTextNode(contenido));
	var nodoActual = document.getElementById(id_contenedor);
	if (nodoActual.childNodes.length == 0)	{//alert("sin hijos");
		siguiente = document.getElementById(id_contenedor).firstChild;
		document.getElementById(id_contenedor).insertBefore(yo, siguiente);
	}
	else	{//alert(nodoActual.childNodes[0].nodeName);
		document.getElementById(id_contenedor).appendChild(yo);
	}
	return yo.id;
}

Es obvio que la llamada en este caso es crearPrimerTag.

Hay un par de alertas hechas comentarios que use para las pruebas.

Saludos

Carlitos · #4 (**permalink**) 02/09/2004, 08:55

Hola Caricatos.

No es que os olvide. Esque estoy medio de vacaciones. (lo de Torremolinos fue un aperitivo) y no participo mucho. Por eso hasta octubre, estoy a medio gas.

Yo por lo menos aprendo algo. Para alguien más, espero que también sea de utilidad.

Un saludete.

JavierB · #5 (**permalink**) 02/09/2004, 09:26

Hola caricatos y Carlitos.

caricatos: está muy bien el código

Me ha gustado sobre todo la idea de pasar a la función los atributos y estilos y asignarlos usando split. También me has enseñado una forma que no conocía de asignar estilos a un objeto: yo.style[estilo] = 'lo que sea', muy útil para trabajar con variables.

Carlitos: disfruta de tus vacaciones todo lo que puedas. Algunos ya lo hemos hecho antes

Saludos,

caricatos · #6 (**permalink**) 02/09/2004, 12:53

Hola otra vez:

¡Qué Lujo!

Carlitos y JavierB aprenden con mi código

En cuanto tenga más cosas que me parezcan importantes lo pongo por aquí... y espero que el DOM no tenga más secretos para esta comunidad...

Saludetes

caricatos · #7 (**permalink**) 06/09/2004, 02:27

Hola otra vez:

Encontré la referencia que tengo del DOM: http://www.linti.unlp.edu.ar/Catedra...es/dom/dom.pdf
Es un fichero pdf así que se puede imprimir muy bien.
Otra dirección con algunos enlaces es ésta: http://www.linti.unlp.edu.ar/frames/proyecto.htm

Saludos

trovanet · #8 (**permalink**) 03/11/2004, 17:32

Caricatos;
El código me ha servido, lo he adaptado para lo que yo necesito y funciona muy bien... pero se me ha presentado un problema en una situación muy especial, sucede que yo agrego varios elementos (textBox, Select, CheckBox) mediante CreateElement y appendChild, cuando he ingresado la información en cada uno de los objetos que se han creado submito los datos y llego a otra página, el problema es cuando presiono el botón atras, nada de lo que se ha creado sigue en su lugar, se pierden la información ingresada y cualquier validación sobre los objetos que alguna vez existieron da error, mi pregunta es, existe forma de conservar la última imagen de la´página y que se pueda seguir trabajando en ella como si nunca se hubiera salido.
De antemano le doy gracias a quien pueda ayudarme.

kepawe · #9 (**permalink**) 05/11/2004, 02:31

Hola a todos

Cita:

Iniciado por trovanet

cualquier validación sobre los objetos que alguna vez existieron da error

Trovanet, he tenido el mismo problema en IE, no me deja acceder a los valores y propiedades de los elementos creados, en Mozilla sí.
He conseguido acceder utilizando la sintesis de array del elemento form.

Código PHP:

   
<html> 
<head> 
<title>Crear un form</title> 
 
</head> 
<body> 
<div id="selectColour"></div> 
 
<a href="javascript:void(0)" onclick="create_form()">Crear form</a> 
<script language=JavaScript type=text/javascript> 
<!-- 
var colour_op=['Selecciona un color','red','green','yellow']; 
// Guardamos aqúi los elementos de formulario creado 
var obj_form = new Array() 
function create_form(){ 
  // comprobar que form1 no este creado 
  for(var ct1 = 0 ; ct1 < document.forms.length; ct1++){ 
 
    if(document.forms[ct1].name == "form1"){ return false} 
  } 
  // Donde vamos a colocar el formulario 
  var div_select = document.getElementById("selectColour") 
  // Creamos el objeto form 
  var form_node = document.createElement("form") 
   // añadimos el atributo 
  form_node.setAttribute("name","form1") 
  form_node.setAttribute("action","form.php") 
  // añadimos el nodo creado como nodo hijo de div_select 
  div_select.appendChild(form_node) 
   
  var input_node = document.createElement("input") 
   input_node.setAttribute("type","button") 
   input_node.setAttribute("name","boton") 
   input_node.setAttribute("value","botón") 
   form_node.appendChild(input_node) 
    
   var select_node = document.createElement("select") 
 
  select_node.setAttribute("name","select1") 
 
  for(var ct = 0; ct < colour_op.length; ct++){ 
 
      var option_node = document.createElement("option") 
      select_node.appendChild(option_node) 
      option_node.setAttribute("value",colour_op[ct]) 
      var text_node = document.createTextNode(colour_op[ct]) 
      option_node.appendChild(text_node) 
 
 
  } 
  form_node.appendChild(select_node) 
   
   
   
  /* IE solo me ha permitido  acceder a las propiedades 
   y valores del select creado  mediante  la sintesis de 
   arrays, para poder trabajar más facilmente con los elementos de 
   form  los guardo en un array. 
  */ 
  for(var ct1 = 0 ; ct1 < document.forms.length; ct1++){ 
    if(document.forms[ct1].name == "form1"){ 
      obj_form[document.forms[ct1].name] = document.forms[ct1] 
        for(var ct2 = 0; ct2 < document.forms[ct1].elements.length; ct2++){ 
        obj_form[document.forms[ct1].elements[ct2].name] = document.forms[ct1].elements[ct2] 
         
         
      } 
    } 
  } 
// utilizamos el array creado para trabajar con los elementos form 
obj_form["select1"].onchange = show_selectedIndex 
  
} 
 
function show_selectedIndex(){ 
  colourButton = obj_form["select1"].options[obj_form["select1"].options.selectedIndex] 
  if(colourButton.index != 0){ 
    obj_form["boton"].style.backgroundColor = colourButton.value 
     
  } 
} 
 
 
//--> 
</script> 
 
 
</body> 
</html>

En cuanto a la perdida de datos, corregirme si me equivoco, solo veo tres posibles soluciones, utilizar cookies, pero claro el usuario lo tiene que tener habilitados. Si trabajas con frames, guardando los datos en unos de los frames, pero si el usario recarga la página los pierdes, o utilizar la propiedad search del objeto location he visto algún ejemplo en el foro.

Espero que te sea util.
Muchas gracias a Caricatos por las direccciones, me están siendo de gran ayuda.

Un saludo a todos

PatomaS · #10 (**permalink**) 05/11/2004, 03:02

Hola gente

Sinceramente, menos masl que estan por aquí estas mentes preclaras que siguen enseñando cosas tan interesantes y me recuerdan que no hay que dejarse llevar por la vagancia...

¡ gracias caricatos !

Felicidad

caricatos · #11 (**permalink**) 05/11/2004, 04:40

Hola otra vez:

trovanet: Me parece que no es posible regenerar las etiquetas creadas, salvo que uses cookies como plantea kepawe, y en tal caso me sería muy difícil ayudarte ya que no suelo usarlas, o usar un lenguaje en el servidor e implementar un script que guarde los datos, pero una implementación de ese estilo tendrías que desarrollarla tú, o pedir ayuda en el foro adecuado... supongo que deberían registrarse los cambios según la IP del usuario... y en esas cosas yo tampoco me he metido (aunque me seduce la idea de implementar algo así...)

Agradezco los comentarios

Saludos

trovanet · #12 (**permalink**) 05/11/2004, 13:59

Muchas gracias Kepawe y Caricatos, la verdad me ha sido de mucha utilidad la ayuda que me han presentado... trataré de buscar una forma de solucionarlo... si lo logro, lo publico... gracias.
Trovanet