MANIPULACIÓN DEL DOM CON JQUERY - PROGRAMACIÓN DE APLICACIONES WEB

02 Apr

Todo programador web se enfrenta a la tarea de manipular dinámicamente la estructura del DOM de una página, y cómo no, JQuery también nos ofrece métodos que nos facilitarán mucho dicha tarea.

Insertar elementos

Para insertar elementos en el DOM con JQuery envolviendo unos dentro de otros, disponemos de los siguientes métodos:

wrap(): envuelve cada uno de los elementos seleccionados (por separado) dentro de otro.
wrapAll(): envuelve todos los elementos seleccionados (agrupados) dentro de otro.
wrapInner(): funciona al contrario que los anteriores, insertando un elemento dentro de los seleccionados.
unwrap(): elimina el padre del elemento indicado.

EJEMPLO:

</script>
</head>
<body>
<input type="button" id="btn_wrap" value="wrap()" />
<input type="button" id="btn_wrapAll" value="wrapAll()" />
<input type="button" id="btn_unwrap" value="unwrap()" />
<input type="button" id="btn_wrapInner" value="wrapInner()" /><p />
<div id="contenedor1">
<span>Esto es un span | </span>
<span class="rojo">Esto es otro span | </span>
<span class="rojo">Esto es otro span | </span>
<span>Esto es otro span</span>
<p id="p1">Esto es un párrafo</p>
</div>
</body>
</html>

Por otro lado, los siguientes métodos permiten insertar contenido fuera de un elemento:

after(): inserta contenido después de un elemento.
before(): inserta contenido antes de otro elemento.

EJEMPLO:

</script>
</head>
<body>
<input type="button" id="btn_after" value="after()" />
<input type="button" id="btn_before" value="before()" />
<div id="contenedor1">
<p>Esto es un párrafo</p>
<p>Esto es otro párrafo</p>
</div>
</body>
</html>

Por último, con los siguientes métodos es posible insertar contenido dentro de otro elemento (algunos de ellos ya los hemos explicado anteriormente):

append(): inserta contenido después del existente en un elemento.
html(): devuelve o establece el código HTML de un elemento.
prepend(): inserta contenido antes del existente en un elemento.
text(): devuelve el texto combinado de cada uno de los elementos seleccionados (incluido el de otros elementos que puedan a su vez contener). También se puede usar para definir el contenido de un elemento.

EJEMPLO:

</script>
</head>
<body>
<input type="button" id="btn_append" value="append()" />
<input type="button" id="btn_prepend" value="prepend()" />
<div id="contenedor1">
<p class="rojo">Esto es un párrafo.</p>
<p class="verde">Esto es otro párrafo.</p>
</div>
</body>
</html>

Eliminar elementos

Para remover elementos disponemos de los siguientes métodos:

detach(): remueve elementos con la posibilidad de que puedan ser insertados nuevamente manteniendo las funcionalidades que tenían definidas (como por ejemplo sus eventos).
empty(): remueve los elementos hijo del elemento especificado.
remove(): elimina de forma definitiva un elemento junto con los otros que contenga.
unwrap(): remueve el elemento padre del especificado.

EJEMPLO:

</script>
</head>
<body>
<input type="button" id="btn_empty" value="empty()" />
<input type="button" id="btn_remove" value="remove()" />
<input type="button" id="btn_unwrap" value="unwrap()" /><br />
<input type="button" id="btn_detach" value="Eliminar con detach()" />
<input type="button" id="btn_restaurar" value="Restaurar el elemento" /><p />
<div id="contenedor">
<div id="divInterior1">
Texto flotante en 'divInterior1'
<a href="#">Esto es un enlace</a>
</div>
<div id="divInterior2">
Texto flotante en 'divInterior2'
<span>Esto es un span</span>
</div>
<div id="divInterior3">
<a id="e" href="#">Esto es un enlace</a>
</div>
<div id="divInterior4">
<p id="p1" class="rojo">Esto es un párrafo</p>
<p id="p2" class="rojo">Esto es otro párrafo.</p>
<p id="p3" class="verde">Esto es un párrafo más.</p>
</div>
</div>
</body>
</html>

Reemplazar elementos

El método replaceWith() permite reemplazar los elementos seleccionados con el contenido que especifiquemos.

En el siguiente ejemplo lo utilizamos para reemplazar unos determinados párrafos por etiquetas HTML 'SPAN':

EJEMPLO:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InformaticaPC | DOM</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow; }
span { font-weight:bold; }
.rojo { color:red; }
.verde { color:green; }
</style>
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#btnReemplazar").click(function() {
$(".rojo").replaceWith("<span>Este texto está en un 'SPAN'</span><br />");
});
});
</script>
</head>
<body>
<input type="button" id="btnReemplazar" value="Reemplazar" />
<p id="p1" class="rojo">Esto es un párrafo</p>
<p id="p2" class="rojo">Esto es otro párrafo.</p>
<p id="p3" class="verde">Esto es un párrafo más.</p>
</body>
</html>

Obtener y recorrer elementos

Antes de explicar cómo recorrer elementos del DOM debes saber que dependiendo del método usado para acceder a los elementos podemos obtener objetos directamente del DOM o bien objetos JQuery (que a su a vez contendrá los objetos del DOM junto con otros métodos y propiedades propios).

Para seleccionar los elementos podemos hacerlo de los siguientes modos:

EJEMPLO:

var elementos = $("#divContenedor1"); // De esta forma obtenemos un objeto JQuery
var elementos = $("#divContenedor1").get(); // Obtenemos un array de objetos directamente del DOM

Una vez obtenidos, para recorrer los elementos usaremos:

$.each(): permite iterar sobre un objeto JQuery, ejecutando una función por cada elemento existente.
JQuery.each(): permite iterar sobre objetos y arrays de JavaScript.

Para entender mejor cómo obtener y recorrer los elementos estudia el siguiente código fuente de ejemplo:

</script>
</head>
<body>
<div id="log"> </div>
<input type="button" id="btnSeleccionarUno" value="Acceder al DIV con id 'divContenedor1'" />
<input type="button" id="btnGetUno" value="Acceder con get() al DIV con id 'divContenedor1'" />
<hr id="hr1" />
<input type="button" id="btnSeleccionarVarios" value="Acceder a los DIV con selector" />
<input type="button" id="btnGetVarios" value="Acceder a los DIV con get()" />
<div id="divContenedor1"> </div>
<div id="divContenedor2"> </div>
<div id="divContenedor3"> </div>
</body>
</html>

Una vez aclarado lo anterior, el siguiente paso es conocer algunos de los métodos existentes para recorrer el árbol de elementos del DOM:

children(): devuelve los elementos hijo que contiene el especificado.
get(): usado para acceder directamente a los elementos del DOM.
prev() / next(): devuelven los elementos anterior y siguiente respectivamente.
parent(): devuelve el elemento padre del especificado.
parents(): devuelve los padres de un elemento en los distintos niveles dentro del árbol DOM.
siblings(): devuelve los elementos 'hermanos' que están al mismo nivel del especificado.

EJEMPLO:

</script>
</head>
<body>
<div id="log"> </div>
<input type="button" id="btnHermanos" value="Elementos al mismo nivel de 'Opción 2B'" />
<input type="button" id="btnHermanoSiguiente" value="Siguiente elemento al mismo nivel de 'Opción 2B'" />
<input type="button" id="btnHermanoAnterior" value="Anterior elemento al mismo nivel de 'Opción 2B'" /><br />
<input type="button" id="btnPadre" value="Obtener padre de la lista principal" />
<input type="button" id="btnHijo" value="Obtener hijos de 'Opción 3'" /><br />
<input type="button" id="btnEnlaces" value="Obtener todos los enlaces" />
<hr id="hr1" />
<div id="divContenedor1">
<ul id="principal">
<li id="opc1"><span>Opción 1</span></li>
<li id="opc2"><span>Opción 2</span>
<ol id="sublista1">
<li id="ol1-opc1"><span>Opción 2A</span></li>
<li id="ol1-opc2"><span>Opción 2B</span></li>
<li id="ol1-opc3"><span>Opción 2C</span></li>
<li id="ol1-opc4"><span>Opción 3C</span></li>
</ol>
</li>
<li id="opc3"><span>Opción 3</span>
<ol id="sublista2">
<li id="ol2-opc1"><span>Opción 3A</span></li>
<li id="ol2-opc2"><span>Opción 3B</span></li>
<li id="ol2-opc3"><span>Opción 3C</span></li>
</ol>
</li>
<li id="opc4"><span>Opción 4</span></li>
</ul>
</div>
<div id="divContenedor2">
<a href="#">Enlace 1</a>
</div>
<div id="divContenedor3">
<a href="#">Enlace 2</a>
</div>
</body>
</html>

Almacenar datos en elementos del DOM

Los elementos del DOM pueden ser manipulados hasta el punto de que es posible almacenar datos en ellos de forma temporal (en caso de objetos se guardan referencias a ellos).

Los métodos que utilizaremos para ello son data() (para almacenar los datos) y removeData() (para eliminarlos).

EJEMPLO:

</script>
</head>
<body>
<div id="log"> </div>
<label for="txtValor1">Escribe un valor</label>
<input type="text" id="txtValor1" value="" size="2" />
<label for="txtValor2">Escribe otro valor:</label>
<input type="text" id="txtValor2" value="" size="2" />
<hr />
<input type="button" id="btnGuardarValor" value="Guardar el valor" />
<input type="button" id="btnRestaurarValor" value="Restaurar el valor" />
<input type="button" id="btnBorrarValores" value="Borrar los valores" />
<hr />
<input type="button" id="btnGuardarObjeto" value="Guardar un objeto" />
<input type="button" id="btnRestaurarObjeto" value="Restaurar el objeto" />
</body>
</html>

Publicado por: Alberto Ayoze Castillo

Fecha de Publicación: 2017

Bibliografía

Ayoze A. (2017). Curso de programación Web.

Recuperado de:

https://books.google.es/books?hl=es&lr=&id=698EDgAAQBAJ&oi=fnd&pg=PR11&dq=++++Manipulaci%C3%B3n+del+DOM+con+Jquery&ots=Iojr5GADx1&sig=rAD6NmK5mxQO_h3AI6StuXVErrc#v=onepage&q=Manipulaci%C3%B3n%20del%20DOM%20con%20Jquery&f=false

Comentarios