Ediciones ENI Editorial | líder en informática
Trabajar con el DOM
Introducción
La integración del DOM ha modificado profundamente la escritura de JavaScript gracias al acceso a los elementos. Pero su verdadera revolución es, sin ninguna duda, la posibilidad de modificar y añadir elementos en la página HTML sobre la marcha.
Modificar el contenido
text()
Devuelve el contenido de texto del elemento correspondiente.
Este método funciona para los documentos HTML, XHTML y XML.
$("div").text(): devuelve, en formato texto, el contenido de la etiqueta <div>.
Este método devuelve una cadena de caracteres (string).
text(valor)
Asigna un nuevo contenido de texto (ver el argumento valor) a los elementos correspondientes.
$("div").text("los nuevos elementos de texto"): inserta, en formato texto, el contenido "los nuevos elementos de texto" en el elemento <div>.
Este método devuelve un objeto jQuery.
text(función)
Desde la versión 1.4, el método text() permite definir el contenido de texto llamando una función.
$('ul li').text(function(index) {
return 'item number ' + (index + 1);
});
html()
Devuelve, en formato HTML, el contenido del elemento correspondiente.
Este método no funciona para los documentos XML (excepto los documentos XHTML).
$("div").html(): devuelve, en formato HTML, el contenido del elemento <div>.
Este método devuelve una cadena de caracteres (string).
html(valor)
Asigna un nuevo contenido HTML (ver el argumento valor) a los elementos correspondientes.
Esta propiedad no está disponible para los documentos XML, aunque sí para los documentos HTML.
$("div").html("<b>nuevo...
Insertar en el interior
1. Primer método
append(contenido)
Añade el contenido al final del elemento especificado, sin suprimir el contenido existente.
El contenido puede ser una cadena de caracteres, código HTML o un objeto jQuery.
append(función)
Desde la versión 1.4 de jQuery, el elemento que se añade también puede estar incluido en una función.
$("p").append("<b>Hello</b>"): inserta al final del párrafo los elementos que se pasan como argumento.
Este método devuelve un objeto jQuery.
Los expertos en JavaScript y en escritura del DOM habrán reconocido el método appendChild().
prepend(contenido)
Añade el contenido al comienzo del elemento especificado, sin suprimir el contenido existente.
El contenido puede ser una cadena de caracteres, código HTML o un objeto jQuery.
prepend(función)
Desde la versión 1.4 de jQuery, el elemento que se añade también puede estar incluido en una función.
$("p").prepend("<b>Hello</b>"): inserta al inicio del párrafo los elementos que se pasan como argumento.
Este método devuelve un objeto jQuery.
Ejemplo:
Añadimos contenido al inicio y al final del elemento caja del ejemplo anterior.
Aspecto inicial:
Aspecto obtenido después de hacer clic en el botón "Insertar el texto":
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
...Insertar en el exterior
after(contenido)
Añade el contenido que se pasa como argumento después del elemento de selección.
El contenido puede ser una cadena de caracteres, código HTML o un objeto jQuery.
$("p").after("<b>Hello</b>"): añade, después del elemento de párrafo <p>, el contenido que se pasa como argumento.
Este método devuelve un objeto jQuery.
after(función)
La versión 1.4 de jQuery también permite pasar como argumento una función que devuelve los elementos que se van a insertar.
$('p').after(function() {
return "<div>Inserción</div>";
});
Este ejemplo inserta un elemento <div> después de cada párrafo.
before(contenido)
Añade el contenido que se pasa como argumento antes de cada elemento de la selección.
El contenido puede ser una cadena de caracteres, código HTML o un objeto jQuery.
$("p").before("<b>Hello</b>"): añade, antes del elemento de párrafo <p>, el contenido que se pasa como argumento.
before(función)
La versión 1.4 de jQuery permite también pasar como argumento una función que devuelve los elementos que se van a insertar.
$('p').before(function() {
return "<div>Inserción</div>"; ...Rodear un elemento
wrap(HTML o elemento)
Rodea cada elemento seleccionado con el elemento que se pasa como argumento. Este procedimiento es muy útil para inyectar una estructura de código adicional en un documento sin modificar su semántica original.
$("p").wrap("<div class='wrap'></div>");
Este método devuelve un objeto jQuery.
Desde la versión 1.4, esta acción también se puede hacer por una función.
wrapAll(HTML o elemento)
Rodea todos los elementos de la selección con un único elemento. Es diferente de la función wrap(), que rodea cada elemento de la selección con un nuevo elemento (ver los siguientes ejemplos).
$("p").wrapAll("<div></div>");
Este método devuelve un objeto jQuery.
wrapInner(HTML o elemento)
Rodea los hijos de un elemento (los nodos de texto incluidos) con otro elemento.
$("p").wrapInner("<b></b>");
Este método devuelve un objeto jQuery.
Desde la versión 1.4, esto también se puede hacer con una función.
unwrap()
Desde la versión 1.4, el método unwrap() permite anular la acción realizada con wrap().
$("#afectar”).click(function() {
$("p").wrap("<div></div>");
});
$("#suprimir").click(function() {
...Sustituir un elemento
replaceWith()
Sustituye el elemento actual por el contenido especificado, en formato de código HTML o de objeto DOM. La función devuelve el elemento jQuery que se acaba de sustituir y lo elimina del DOM.
$("#div1").replaceWith("<div>Nueva capa</div>");
Este método devuelve un objeto jQuery.
Comentarios
El método html() sustituye el contenido del elemento, mientras que replaceWith() sustituye el elemento en sí mismo.
Ejemplo
Modificamos el botón de envío de formulario después de hacer clic en él. Las imágenes del ejemplo están disponibles para su descarga desde la página Información.
Aspecto inicial donde se muestra la imagen original del botón:
Después de hacer clic en el botón, se reemplaza su imagen:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").replaceWith("<img src='no.gif' alt='' />");
$("span").css("text-decoration","line-through"); ...Eliminar un elemento
1. Borrar un elemento
remove() o remove(selector)
Elimina del árbol del DOM todos los elementos que responden a los criterios de selección.
$("p").remove(): elimina los párrafos <p>.
$(’div’).remove(’.box’): elimina las cajas <div> con la clase box.
Este método devuelve un objeto jQuery.
detach() o detach(selector)
La versión 1.4 de jQuery introdujo el método detach(). Es idéntico a remove(), pero conserva todos los datos asociados a los elementos que se eliminan. Puede resultar útil cuando los datos que se eliminan se insertan más adelante en el script.
$("p").detach(":contains(’Bienvenido’)"): elimina el párrafo <p> que contiene el dato "Bienvenido".
Ejemplo
Pensemos en un botón de tipo casilla de selección (checkbox). Cuando se selecciona, se muestra un campo de línea de texto. Cuando se deselecciona, el campo de texto desaparece.
Aspecto inicial:
Aspecto obtenido después de seleccionar la casilla:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#clic").click(function(){
if ($(this).is(":checked")){
...Copiar un elemento
clone()
Selecciona y copia (clona) los elementos del DOM encontrados. Esta función es útil para crear copias de elementos y desplazarlas hacia otro lugar concreto del DOM.
$("p").clone(): copia el párrafo.
Parámetros (opcional): se indica true si se desea clonar los administradores de eventos asociados a la selección.
Este método devuelve un objeto jQuery.
Ejemplo
Clonamos una caja y su contenido (<div id="div1">) para desplazarla a otro lugar de la página (<div id="div2">).
Aspecto inicial:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#div2").hide();
$("button").click(function () {
$("#div1").clone().prependTo("#div2");
$("#div2").show();
});
});
</script>
<style>
button {
margin-bottom: 15px;
}
#div1 { ...Algunas aplicaciones
1. Añadir un pie de página y los enlaces de regreso
Vamos a añadir, con algunas líneas de jQuery, un pie de página y los enlaces de regreso hacia la parte superior de la página.
El archivo HTML:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>jQuery</title>
</head>
<body>
<h2>Título de la página</h2>
<div id="contenido">
<p> Lorem ipsum dolor sit amet...</p>
<p>Praesent commodo cursus...</p>
<p>Maecenas sed diam eget...</p>
<p>Donec ullamcorper nulla...</p>
</div>
</body>
</html>
En este estado, los pies de página y los enlaces de regreso no aparecen en el archivo HTML.
Aquí tiene el aspecto inicial:
Añadimos el código jQuery.
<script>
$(document).ready(function(){
$('<a id="top" name="top"></a>').prependTo('body');
$("p").after("<a href='#top'>Inicio de página</a>");
$("#contenido").after("<div id='foot'><i>Notas de pie de
página</i></div>");
});
</script>
Explicaciones.
$(document).ready(function(){
Inicialización del DOM en jQuery.
$('<a id="top" name="top"></a>').prependTo('body');
En primer lugar, ponemos el ancla (<a id="top" name="top"></a>)) al inicio de la página. El método prepend() se aplica al elemento <body> y permite situar el ancla justo después.
$("p").after("<a href='#top'>Inicio de página</a>");
Esta línea de código sitúa el enlace de regreso hacia la parte superior...
