Tarde o temprano 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.
Si bien con anterioridad hemos explicado cómo agregar y eliminar atributos en los elementos HTML, en este capítulo explicaremos otras formas de acceder al DOM.
Si deseas realizar las prácticas te recomendamos usar alguna herramienta o extensión en tu navegador web que te permita visualizar información relativa a la página cargada (en nuestro caso usaremos la consola JavaScript del navegador Chrome, que puedes activar desde el menú Herramientas, Consola JavaScript).
Vea también: [ Manipular el DOM ]
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.
Veamos un 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; }
p { background-color:cyan; }
#contenedor1 { float:left;width:300px;background-color:lightgreen; }
.rojo { color:red; }
.verde { color:green; }
</style>
<!-- Agregamos JQuery -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// wrap()
$("#btn_wrap").click(function() {
$(".rojo").wrap("<p></p>");
});
// ----------------
// wrapAll()
$("#btn_wrapAll").click(function() {
$(".rojo").wrapAll("<div class='verde'></div>");
});
// ----------------
// wrapInner()
$("#btn_wrapInner").click(function() {
$("#p1").wrapInner("<div class='verde'></div>");
});
// ----------------
// unwrap()
$("#btn_unwrap").click(function() {
$("span.rojo").unwrap();
});
});
</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>
Tanto en este como en el resto de ejemplos, para comprobar los cambios en el código HTML activa la pestaña 'Elements' de la consola JavaScript (si usas Chrome).
 |
 |
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.
<!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; }
p { background-color:cyan; }
#contenedor1 { float:left;width:300px;background-color:lightgreen; }
.rojo { color:red; }
.verde { color:green; }
</style>
<!-- Agregamos JQuery -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// after()
$("#btn_after").click(function() {
$("p").after("<span class='rojo'>SPAN insertado después del párrafo</span><br />");
});
// before()
$("#btn_before").click(function() {
$("p").before("<span class='rojo'>SPAN insertado antes del párrafo</span><br />");
});
});
</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.
Veamos un 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; }
p { background-color:cyan; }
#contenedor1 { float:left;width:300px;background-color:lightgreen; }
.rojo { color:red; }
.verde { color:green; }
</style>
<!-- Agregamos JQuery -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// append()
$("#btn_append").click(function() {
$(".rojo").append(" AGREGADO.");
});
// prepend()
$("#btn_prepend").click(function() {
$(".verde").prepend("AGREGADO. ");
});
});
</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>
Vea también: [ Insertar en DOM (envolver) ] - [ Insertar en DOM (dentro de otro elemento) ]
Vea también: [ Insertar en DOM (fuera de otro elemento) ]
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.
<!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; }
p { background-color:cyan; }
#contenedor { float:left;width:300px;background-color:lightgreen; }
.rojo { color:red; }
.verde { color:green; }
</style>
<!-- Agregamos JQuery -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Variable para guardar la referencia al elemento borrado con 'detach()
var obj = null;
// ----------------
// empty()
$("#btn_empty").click(function() {
$("#divInterior1").empty();
});
// ----------------
// remove()
$("#btn_remove").click(function() {
$("#divInterior2").remove();
});
// ----------------
// detach()
$("#btn_detach").click(function() {
obj = $("#p3").detach();
});
// ----------------
// Restaurar el elemento
$("#btn_restaurar").click(function() {
$("#p2").after( obj );
obj = null;
});
// ----------------
// unwrap()
$("#btn_unwrap").click(function() {
obj = $("#enlace").unwrap();
});
});
</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>
Vea también: [ Remover 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':
<!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>
<!-- Agregamos JQuery -->
<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>
 |
 |
Vea también: [ Reemplazar 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:
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:
<!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; }
p { color:red; }
input { margin:4px; }
#log { color:yellow;background-color:red;margin-bottom:10px; }
</style>
<!-- Agregamos JQuery -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#btnSeleccionarUno").click(function()
{
var elementos = $("#divContenedor1"); // Del siguiente modo obtenemos un objeto JQuery
$("#log").text( "'" + elementos.attr("id") + "'" ); // Como hemos obtenido un objeto JQuery accedemos a él con 'attr()'
// No podemos acceder a él del siguiente modo:
//$("#log").text( elementos[contador].id );
// También se podría acceder de los siguientes modos:
//$("#log").text( elementos[0].id );
//$("#log").text( elementos.get(0).id );
});
// -------------------
$("#btnGetUno").click(function()
{
var elementos = $("#divContenedor1").get(); // Obtenemos un array de objetos directamente del DOM
$("#log").text( "-> " + elementos[0].id ); // Mostramos el 'id'
});
// -------------------
$("#btnSeleccionarVarios").click(function()
{
var elementos = $("DIV"); // Del siguiente modo obtenemos un array de objetos JQuery
$("#log").text("");
// Mostramos los índices e 'id'
elementos.each( function(indice, elemento) {
$("#log").append( "índice [" + indice + "] -> '" + elemento.id + "'<br />" );
});
});
// -------------------
$("#btnGetVarios").click(function()
{
var elementos = $("DIV").get(); // Obtenemos un array de objetos directamente del DOM
$("#log").text("");
// Mostramos el 'id'
for( var contador=0; contador < elementos.length; contador++ ) {
$("#log").append( "'" + elementos[contador].id + "'<br />" );
}
});
});
</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.
Veamos un 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; }
p { color:red; }
input { margin:4px; }
#log { color:yellow;background-color:red;margin-bottom:10px; }
</style>
<!-- Agregamos JQuery -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var elemento, elementos;
// -------------------
// siblings()
$("#btnHermanos").click(function() {
resetear();
elementos = $("#ol1-opc2").siblings();
$("#log").text( "El elemento con id 'ol-opc2' tiene otros [" + elementos.length + "] a su mismo nivel." );
elementos.css("color", "blue");
});
// -------------------
// next()
$("#btnHermanoSiguiente").click(function() {
resetear();
$("#ol1-opc2").next().css("color", "blue");
});
// -------------------
// prev()
$("#btnHermanoAnterior").click(function() {
resetear();
$("#ol1-opc2").prev().css("color", "blue");
});
// -------------------
// parent()
$("#btnPadre").click(function() {
resetear();
elemento = $("#principal").parent();
$("#log").text( "El padre de la lista con id 'principal' tiene id [" + elemento.attr('id') + "]" );
elemento.css("border", "2px solid red");
});
// -------------------
// parents()
$("#btnPadres").click(function() {
resetear();
elementos = $("#principal").parents();
$("#log").text( "El elemento con id 'Opción 3B' tiene [" + elementos.length + "] elementos padre: " );
for( var contador=0; contador < elementos.length; contador++ ) {
$("#log").append("'#" + elementos[contador].tagName + "' | ");
}
});
// -------------------
// children()
$("#btnHijo").click(function() {
resetear();
elementos = $("#sublista2").children();
elementos.css("color", "blue");
});
});
// -------------------
function resetear()
{
$("#divContenedor1").css("border","none");
$("li").css("color","black");
$("#sublista2").css("background-color", "lightyellow");
$("#log").html(" ")
}
</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>
Vea también: [ $.each() ] - [ JQuery.each() ] - [ Métodos para recorrer el DOM ] - [ Métodos de 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). Estudia el siguiente 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; }
p { color:red; }
#log { color:yellow;background-color:red;margin-bottom:10px; }
</style>
<!-- Agregamos JQuery -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var valor1, valor2;
// ----------------
$("#btnGuardarValor").click(function() {
valor1 = $("#txtValor1").val();
valor2 = $("#txtValor2").val();
$("body").data("valor_1", valor1);
$("body").data("valor_2", valor2);
$("#log").text("Valores guardados");
});
// ----------------
$("#btnRestaurarValor").click(function() {
valor1 = $("body").data("valor_1");
valor2 = $("body").data("valor_2");
$("#log").text( "El primer valor recuperado es [" + valor1 + "] y el segundo es: [" + valor2 + "]" );
});
// ----------------
$("#btnBorrarValor").click(function() {
valor1 = $("body").removeData("valor_1");
valor2 = $("body").removeData("valor_2");
$("#log").text( "El primer valor recuperado es [" + valor1 + "] y el segundo es: [" + valor2 + "]" );
});
// ----------------
$("#btnGuardarObjeto").click(function() {
valor1 = $("#txtValor1").val();
valor2 = $("#txtValor2").val();
$("body").data( "datos1", { valor_1:valor1, valor_2:valor2} );
$("body").data( "datos2", { valor_1:valor1*1000, valor_2:valor2*1000} );
$("#log").text("Objeto guardado");
});
// ----------------
$("#btnRestaurarObjeto").click(function() {
valor1 = $("body").data("datos1").valor_1;
valor2 = $("body").data("datos1").valor_2;
$("#log").html( "El primer valor del objeto recuperado es [" + valor1 + "] y el segundo es [" + valor2 + "]<br />" );
valor1 = $("body").data("datos2").valor_1;
valor2 = $("body").data("datos2").valor_2;
$("#log").append( "El primer valor del objeto recuperado es [" + valor1 + "] y el segundo es [" + valor2 + "]" );
});
});
</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>
Vea también: [ Almacenamiento de datos ]
