Propiedades Basicas Javascript: Modificaciones Via DOM

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE

El DOM o Document Object Model es la interfaz que nos permite el uso del HTML. Esta interfaz además nos permite modificar el esquema del HTML, incluso cuando no tenemos acceso al mismo. Lo que te enseñará este tuto es a insertar elementos y a moverlos de lugar dentro de la estructura del HTML de tu foro, incluso cuando no puedas modificar el HTML de tu foro por la versión de PHPBB que usas.


Empleando js podemos envolver a elementos con divs determinados o, por el contrario, eliminarle divs a un HTML. Esto se hace útil cuando uno usa un foro que no sea PHPBB2, ya que puede modificar la estructura del foro con facilidad. Para poder rodear a un elemento, supongamos, llamado #cajita, con uno que tenga class="shalala", tendremos que hacer algo así:

Código:

$('#cajita').wrap('<div class="shalala"></div>');

La estructura HTML resultante sería:

Código:

<div class="shalala"><div id="cajita">bla bla bla, contenido de la cajita</div></div>

Ahora, si para empezar tenemos esa estructura y queremos quitar el div llamado .shalala, lo que haremos será:

Código:

$('#cajita').unwrap('<div class="shalala"></div>');

Entonces, el resultado final será meramente nuestra querida #cajita:

Código:

<div id="cajita">bla bla bla, contenido de la cajita</div>

Otro objetivo que podemos llegar a tener es querer hacer que algo quede adentro de otro algo. Por ejemplo, podemos querer que nuestra famosa .shalala termine dentro de #cajita. Podemos tener dos casos:

A. Si el elemento que queremos que quede adentro de otro elemento ya existe en el HTML.
Por ejemplo, si nuestro .shalala ya existe en el HTML, en cualquier punto del documento (página), y lo queremos quitar de donde está para meterlo dentro de #cajita.

• Si queremos que salga al final del contenido de #cajita, emplearemos lo siguiente:
  

  $('.shalala').appendTo($('#cajita'));

  El resultado sería:
  

  Código:

  <div id="cajita">Bla bla bla contenido de la cajita<div class="shalala">contenido del shalala</div></div>

• Si queremos que salga al principio del contenido de #cajita, emplearemos lo siguiente:
  

  $('.shalala').prependTo($('#cajita'));

  El resultado sería:
  

  Código:

  <div id="cajita"><div class="shalala">contenido del shalala</div>Bla bla bla contenido de la cajita</div>

B. Si el elemento que queremos que quede adentro de otro elemento NO existe en el HTML.
Por ejemplo, si nuestro .shalala no ha sido creado en el HTML, en ningún punto del documento (página), y lo queremos generar directamente dentro de #cajita.

• Si queremos que salga al final del contenido de #cajita, emplearemos lo siguiente:
  

  Código:

  $('<div class="shalala"></div>').appendTo('#cajita');

  El resultado sería:
  

  Código:

  <div id="cajita">Bla bla bla contenido de la cajita<div class="shalala">contenido del shalala</div></div>

• Si queremos que salga al principio del contenido de #cajita, emplearemos lo siguiente:
  

  Código:

  $('<div class="shalala"></div>').prependTo('#cajita');

  El resultado sería:
  

  Código:

  <div id="cajita"><div class="shalala">contenido del shalala</div>Bla bla bla contenido de la cajita</div>

Nuestro objetivo ahora será hacer que aparezca contenido HTML por fuera de los elementos. Nuevamente, esto dependerá de si el elemento que queremos insertar ya existe o no.

A. Si el elemento que queremos que quede adentro de otro elemento ya existe en el HTML.
Por ejemplo, si nuestro .shalala ya existe en el HTML, en cualquier punto del documento (página), y lo queremos quitar de donde está para colocarlo antes o después de #cajita.

• Si queremos que antes de #cajita, emplearemos lo siguiente:
  

  $('#cajita').insertBefore($('.shalala'));

  El resultado sería:
  

  Código:

  <div class="shalala">contenido del shalala</div><div id="cajita">Bla bla bla contenido de la cajita</div>

• Si queremos que salga después de nuestra #cajita, emplearemos lo siguiente:
  

  $('#cajita').insertAfter($('.shalala'));

  El resultado sería:
  

  Código:

  <div id="cajita">Bla bla bla contenido de la cajita</div><div class="shalala">contenido del shalala</div>

B. Si el elemento que queremos que quede adentro de otro elemento NO existe en el HTML.
Por ejemplo, si nuestro .shalala no ha sido creado en el HTML, en ningún punto del documento (página), y lo queremos generar directamente antes o después de #cajita.

• Si queremos que antes de #cajita, emplearemos lo siguiente:
  

  Código:

  $('#cajita').insertBefore('<div class="shalala"></div>');

  El resultado sería:
  

  Código:

  <div class="shalala">contenido del shalala</div><div id="cajita">Bla bla bla contenido de la cajita</div>

• Si queremos que salga después de nuestra #cajita, emplearemos lo siguiente:
  

  Código:

  $('#cajita').insertAfter('<div class="shalala"></div>');

  El resultado sería:
  

  Código:

  <div id="cajita">Bla bla bla contenido de la cajita</div><div class="shalala">contenido del shalala</div>

¡ATENCIÓN!
Por si no lo notaste, en estas funciones los elementos van al revés que en las explicadas en la sección de Insertar Elementos (por dentro):
- Para insertar elementos dentro de otros elementos, primero llamamos al elemento "a insertar", luego colocamos la función y entre los paréntesis de la función colocamos al elemento "contenedor".
- Para insertar elementos por fuera de otros elementos, primero llamamos al elemento "de referencia", luego colocamos la función y entre los paréntesis de la función colocamos al elemento "a insertar".


Si, donde hay algún elemento (supongamos, nuestra estimada #cajita) queremos que aparezca otro elemento y no #cajita (supongamos, la buena .shalala), debemos emplear la siguiente función:

$('#cajita').replaceWith('.shalala');

Al igual que en los casos anteriores, si .shalala no existe podemos escribirlo de esta forma:

Código:

$('#cajita').replaceWith('<div class="shalala"></div>');

A veces queremos o necesitamos cambiar un atributo de un elemento HTML, y no tenemos como. Supongamos que esta vez #cajita es una imagen y queremos cambiar su atributo src:

$('#cajita').attr('src', 'nuevo link aquí');

Es simple, pero puede permitirnos modificar elementos que no podemos tocar o cambiar los atributos de elementos ante determinados eventos, de ser necesario (:

Lo siento si esto fue algo más largo que los anteriores e__e ¡pero no quería que temas tan importantes quedaran separados por allí! En el próximo tuto, aprenderemos a emplear contadores de tiempo, hacer loops infinitos y otras cosas entretenidas. Cualquier duda, consulta, etc. ¡no duden en dejar su mensaje aquí mismo! (: Recuerden practicar para manejar todo cómodamente.