Experiencias DOM

[caricatos]

Hola amigos:

Resulta que estoy experimentando con lo que he podido encontrar sobre el DOM, y hay cosas que creo que son muy interesantes:

DOM es modelo de objetos en documento (o algo similar), y los objetos deberían tener propiedades/atributos y métodos (o funciones). Con respecto a los atributos, tenemos el id o class o name... y podemos inventarnos los nuestros fácilmente.

Y los métodos... sólo podemos relacionarlos a los eventos: onclick, onload...

En este tema es donde quiero compartir un conocimiento, obtenido en base a pruebas, y se puede comprobar en este link: http://www.pepemolina.com/navidad/cabeza3.html

He generado dos elementos y los he puesto en la página:

Código PHP:

  var    unaImagen = document.createElement("img"); 
var    unDiv = document.createElement("div"); 
    unDiv.appendChild(unaImagen); 
    document.body.appendChild(unDiv);  
   

Luego le he puesto estilos y atributos... y lo más importante: le he asignado un método: "mover"

Código PHP:

  var fin = PapaNoel.width * -1; 
var retardo = 5000; 
 
unaImagen.mover = function()    { 
    soy = eval(this); 
    soy.posicion = soy.posicion - 8; 
    soy.style.left = soy.posicion; 
    if (soy.posicion < fin)    { 
        soy.posicion = anchoPagina + soy.width; 
        setTimeout("soy.mover()", retardo); 
    } 
    else 
        setTimeout("soy.mover()", 35); 
}  
   

Por último, se llama al método:

unaImagen.mover();

y ¡voilá! (creo que se escribe así)

Pero ahora tengo un problema, ya que quiero "reutilizar el método" pero no lo he conseguido (al menos funcionando en los navegadores que he usado)
Sé como "clonar" elementos con elemento.cloneNode(true)... y colgarlo de otro elemento con appendChild, pero los métodos no los he podido aprovechar.
Tenía pensado hacer un script como el de los copos de nieve pero usando el DOM.

Si alguien sabe hacerlo, le agradecería que lo dijera.

De todos modos, que les parece si "compartimos" los conocimientos que vayamos adquiriendo en este tema... ... creo que puede ser muy interesante.

Saludos

[JavierB]

Hola, caricatos.

He visto la página que has puesto y solo sale ¡Feliz Navidad! . Cotilleando el código me ha parecido entender que tiene que salir un Papá Noel, pero yo no le he visto.

Sobre lo de compartir, creo que a todos les parecerá bien porque esa es la idea de los Foros. Yo tengo localizadas un par de páginas sobre el tema, pero ahora estoy en el trabajo y no puedo buscarlas por la güeb. Cuando llegue a casa las saco de mis favoritos y las coloco aquí.

Por cierto... Feliz Navidad para tí también.

Saludos,

[KarlanKas]

Muchas gracias por el ejemplo, caricatos! Desde que tunait me habló de los "niños" estoy buscando como aplicarlo. Y realmente para empezar tu ejemplo viene muy bien, es lo que buscaba.

Te recomiendo la lectura del manual sobre CSS2 de la w3c.org, traducido aqui. Añade jugosas posibilidades a todo esto.

Feliz navidad a todos!

[caricatos]

Hola otra vez:

Voy a romper el "protocolo" y contestar en primer lugar a KarlanKas porque en esta entrañables "fechas" el avatar me ha conmovido ... JavierB: porqué no te animas a ponerle el "gorrito" al "pajarito" en tu avatar... (espero que no se tome esta frasesilla con segundas o terceras intenciones)...

El efecto es tal como dices (Javi), y puedes verlo en esta página: http://www.pepemolina.com/navidad/prueba.html

En el tercer frame está el código que señalé antes.

Ahora en serio...

En la linea:

setTimeout("soy.mover()", retardo);

Podría haber puesto "unaImagen.mover()"...
y funcionaría igual (lo he probado)

Pero al poner "this", pensé que podría ser "genérico", pero al probarlo me desilusioné...

La cuestión es obtener algún identificador que no sea "basado en atributos" como id, name...

Una de las cosas que he probado es poner:
otraImaqen.mover = unaImagen.mover, pero no a resultado...

La cosa es algo complicado. Si hacen falta más explicaciones, espero que me lo puedan decir.

Siguiendo con el tema principal: ¡Feliz Navidad!

[JavierB]

Hola de nuevo.

caricatos: ya he visto el papá noel sobre lo de poner gorro al pájaro, me temo que no va a ser posible. Mis capacidades para el diseño gráfico son practicamente nulas.

Voy a dejar las páginas prometidas:

http://kusor.net/traducciones/
http://www.tierradenomadas.com/indic...tablacontenido
http://www.dansteinman.com/dynduo/es/

Las dos primeras, sobre todo, me parecen muy interesantes.

Saludos,

[caricatos]

Hola otra vez:

Me he fijado en los enlaces y me han parecido muy buenos, aunque particularmente, creo que ya los conocía (ya son unos cuantos años en esto)... de todos modos, animo a todos a visitarlos.

En parte he conseguido lo que buscaba, pero esperaba que hubiera un "atajo" para conseguirlo... en explorer se puede usar un atributo "uniqueID" pero no vale para mozilla, así que decidí generar un atributo que llamé "soy" para autorreferenciarse, y así pude crear una array de elementos "img" colgados de un div y usar un método para darle dinamismo (moverse)

El típico efecto de nieve está en este link: http://www.pepemolina.com/navidad/nieve.html

La asignación es como se asignan los atributos, pero asignando funciones...

function mover() {
//el código
}

...y ...

elemento.mover = mover;
También hay dos elementos que se "clonan", en explorer se clona también el método... por ejemplo:

unaimagen.mover = mover;
otraImagen = unaImagen.cloneNode(true);// con true se clonan las propiedades.
unDiv.appendChild(otraImagen);
otraImagen.mover();

Si encuentro algún otro enlace para compartir, lo pondré en este post.

El efecto de la nieve supongo que puede ser mejorado, como siempre, pueden dar sus opiniones.

Saludetes

[JavierB]

Hola a todos.

Siguiendo con el tema del DOM, tengo este código:

Código PHP:

  elem=document.getElementById('pru'); 
elDiv=document.createElement('div'); 
elDiv.setAttribute('className','a'); 
elDiv.setAttribute('id','algo'); 
elDiv.onclick=function() {alert(this.id);} 
elem.appendChild(elDiv);  
   

La parte que me interesa es el onclick y la función que lanza. He conseguido asignar la misma función a otros elementos, como puso caricatos (¡Hola! ) en un mensaje anterior, pero mi curiosidad ahora es si se puede llamar a esa función desde, por ejemplo, un botón.

Estos son algunos de los intentos fallidos:

<input type="button" onclick="document.getElementById('algo').onclick"/>
<input type="button" onclick="algo.onclick"/>

No da ningún error de JavaScript, pero tampoco sale el alert que se supone debería salir.

Gracias por vuestras respuestas. Saludos,

[KarlanKas]

Felices Reyes Javier!!!

Mira a ver si esta chapucilla te sirve:

Código PHP:

  <html> 
<head> 
    <title>Untitled</title> 
    <style> 
    .a{background:red; 
    width:100px; 
    height:100px;} 
    </style> 
</head> 
 
<body> 
<div id="pru"></div> 
<script> 
elem=document.getElementById('pru'); 
elDiv=document.createElement('div'); 
elDiv.setAttribute('className','a'); 
elDiv.setAttribute('id','algo'); 
elDiv.onclick=pepe 
function pepe(esto) {alert(esto.id);} 
elem.appendChild(elDiv); 
 
</script> 
<input value="www" type="button" onclick="pepe(elDiv)"/> 
 
</body> 
</html>  
  

[JavierB]

Hola, KarlanKas.

¿Que tal se han portado los Reyes Majos? ¿Te han traido mucho código?

El que me has mandado funciona bien cuando se pulsa en el botón, pero no cuando se pulsa en el propio div

Gracias de todas formas. Seguiré intentandolo.

Saludos,

[caricatos]

Hola otra vez:

Creo que en explorer se puede usar el método "click" que simula la pulsación del ratón y se asocia a las etiquetas del body (y curiosamente vale en el tag html)...

Otra cosa sería:

asignar el onclick a una variable "x" y luego poner "x()"...

<button id="trampa" name="trampa" onclick="alert(this.id)">trampa</button>
<button onclick="var x = document.getElementById('trampa').onclick; x();">prueba</button>

Saludos

[KarlanKas]

Hola a los dos!!

Javier, me han traido montañas de código, y había uno para tí!!

Es este:

Código PHP:

  <html> 
<head> 
    <title>Untitled</title> 
    <style> 
    .a{background:red; 
    width:100px; 
    height:100px;} 
    </style> 
</head> 
 
<body> 
<div id="pru"></div> 
<script> 
elem=document.getElementById('pru'); 
elDiv=document.createElement('div'); 
elDiv.setAttribute('className','a'); 
elDiv.setAttribute('id','algo'); 
elDiv.onclick=pepe 
function pepe(esto) { 
if (esto){alert(esto.id);} 
else{alert(this.id)}} 
elem.appendChild(elDiv); 
 
</script> 
<input value="www" type="button" onclick="pepe(elDiv)"/> 
 
</body> 
</html>  
  

[JavierB]

Hola de nuevo.

caricatos: no he tenido tiempo de probar tu código

KarlanKas: tu código funciona tal como lo has puesto, es decir, creando el div al principio, pero si lo creas después de cargar la página no marcha

Bueno, a mi también me han traido algo de código aunque con un poco de retraso (me han puesto como excusa algo de un desvío a Ganímedes)

Código PHP:

      elem=document.getElementById('pru'); 
    elDiv=document.createElement('div'); 
    elDiv.setAttribute('className','abcdef'); 
    elDiv.setAttribute('class','abcdef'); 
    elDiv.setAttribute('id','algo'); 
    elDiv.setAttribute('onclick','pepe(this.id)'); // nota 1 
    elDiv['onclick']=new Function('pepe(this.id)'); // nota 2 
    elem.appendChild(elDiv);  
   

nota 1: esto es para navegadores basados en gecko (o algo así)
nota 2: esto es para el resto

Además la función pepe debe estar fuera del bloque donde se crea el div sino no funciona (al menos a mí)

Para terminar la larga parrafada y por si resulta de utilidad a alguien. Para asignar un estilo al elemento creado:

Explorer: elDiv.setAttribute('className','abcdef');
Netscape: elDiv.setAttribute('class','abcdef');

Saludos y gracias a los dos.

[caricatos]

Hola otra vez:

Tengo muchísimas nuevas experiencias con el DOM, para empezar voy a poner un ejemplo de ejecutar el "onclick" de otro elemento:

<button
id="trampa"
name="trampa"
onclick="alert(this.id)">trampa
</button>
<button
onclick="var x = document.getElementById('trampa').onclick; document.getElementById('trampa').x = x; document.getElementById('trampa').x(); document.getElementById('trampa').removeAttribute( 'x'); this.removeAttribute('x')">prueba
</button>

El primer botón tiene onclick=alert(this.id) id=trampa

El segundo sin tener un id y sin tener un alert hace lo mismo que el primero...

Sobre lo del uso de onclick, y la asignación de eventos, en el explorer se debería usar attachEvent(evento, rutina) y en Mozilla addEventListener(evento[sin on], rutina, true/false)

La forma directa de asignación de eventos, me parece que elimina cualquier asignación que hubiera antes.

Saludos

[masterjail]

Hola, he rescatado esta conversación porque, aunque es de ya hace algun tiempo, me ha resultado interesante, solo hay una cosa que no me ha quedado clara porque no consigo hacer:

¿Cuando se clona un elemento los métodos que tiene asociados se copian en el elemento destino? Es que yo no lo logro.

Echádle un vistazo a este código si teneis un ratillo:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title></title>
  <script type="text/javascript" language="JavaScript">
  function clona(){
    var parent = this.parentNode;
    var clon = this.cloneNode(true);
    parent.appendChild(clon);
  };
  </script>
</head>
<body>
  <div id="div1"><img id="imatge" src="b.png" width="16" height="16" alt="" border="0"></div>
  <script type="text/javascript" language="JavaScript">
  document.getElementById("imatge").addEventListener("click",clona,false);
  </script>
</body>
</html> 

La intención de esto es que al hacer click sobre la imagen esta se clone, como podéis ver esto pasa así si usais Firefox (con IE no me ha funcionado) ya que aparece una nueva imagen similar a la derecha de la original.

Mi desilusión ha sido ver que al hacer click en la imágen clonada no sucede nada, es decir, los métodos de la imagen original no se clonan...

Creo haber entendido que Caricatos si logró hacerlo... me podríais echar una manita?

Muchas gracias.

[caricatos]

Hola:

addEventListener no lo soporta explorer, debes usar attachEvent...

document.getElementById("imatge").attachEvent("onc lick", clona);

Podrías discriminar el navegador con document.all porque aunque opera también cuela, creo que implementa las 2 formas.

Pruébalo y nos lo comentas...

Saludos

[masterjail]

Hola de nuevo, lo que he hecho ha sido modificar un poco el código añadiendo una pequeña función que me encontré por ahi (concretamente aquí: http://weblogs.asp.net/asmith/archiv.../06/30744.aspx)

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
  <title></title>
  <script type="text/javascript" language="JavaScript">
  function XBrowserAddHandler(target,eventName,handlerName){
    if (target.addEventListener) target.addEventListener(eventName,handlerName,false);
    else if (target.attachEvent) target.attachEvent("on" + eventName,handlerName);
  };
  function clona(){
    var parent = this.parentNode;
    var clon = this.cloneNode(true);
    parent.appendChild(clon);
  };
  </script>
</head>

<body>
  <div id="div1"><img id="imatge" src="b.png" width="16" height="16" alt="" border="0"></div>
  <script type="text/javascript" language="JavaScript">
  var imatge = document.getElementById("imatge");
  XBrowserAddHandler(imatge,"click",clona);
  </script>
</body>

</html> 

Con esto me funciona en Firefox, IE y Opera, pero en IE me sale un error en la línea: var clon = this.cloneNode(true);

De todas formas, lo que quería averiguar era como copiar los manejadores de eventos y métodos cuando se clona un elemento.

[SiR.CARAJ0DIDA]

esto no funciona??

function clona() {
var parent = this.parentNode;
var clon = this.cloneNode(true);
parent.appendChild(clon);
clon.onclick = this.onclick;
};

[masterjail]

Lo he probado y no me funciona...