jQuery Blues: 11. Manipulando el DOM

Introducción a la manipulación del DOM con jQuery y la delegación de eventos

klimt

archivado en: JavaScript / 26 octubre, 2013 / taller:

Sigo con el tutorial de jQuery. En esta entrada tocaría seguir viendo las funciones, pero casi vamos a ver mejor otras cosa más divertida que es la manipulación del DOM.

En esencia, con jQuery tenemos dos maneras de crear o modificar los elementos de una web de forma dinámica. Una es con AJAX, que ya veremos más adelante, y otra es mediante una serie de métodos que nos permiten manipular el DOM. Los principales son:

text()

Uno de los más habituales es text(), que devuelve o modifica el texto que hay dentro de un par de etiquetas contenedoras. Si se deja en blanco, captura lo que hay...

<script>

$(document).ready(function($) {

var saludo = $("#saludo").text();

console.log(saludo) // Hola Mundo

});

</script>

</head>

<body>

<div id="saludo">Hola Mundo</div>

</body>

</html>

Y si se incluye alguna cadena, sustituye lo que se encuentra en el contenedor indicado.

$("#saludo").text("Hola Marte");

...

<!-- Aquí aparecerá Hola Marte -->

<div id="saludo">Hola Mundo</div>

Es muy útil para recorrer documentos XML, pero de momento me limito a enunciarlo.

$(config_xml_elementos).find("element").each(function() {

abreviatura = $(this).find('abreviatura').text();

masaAtomica = $(this).find('masaatomica').text();

atom[abreviatura]= parseInt(masaAtomica);

});

html()

Este método es muy parecido al anterior, pero permite incluir código HTML. (Observad el empleo de comillas simples para poder utilizarlas dentro de una cadena que está encorchetada por comillas dobles).

$("#saludo").html("<p style='color:#900'>Hola Marte</p>");

append() y prepend()

En los dos casos anteriores sustituíamos lo que había por el nuevo contenido, pero si queremos conservar el contenido original tenemos dos métodos formidables: append, que «cuelga» lo nuevo después de lo viejo y prepend, que inserta lo nuevo justo antes del primer elemento original. En ambos casos podemos incluir etiquetas html.

$("#saludo").append("<br /> Hola Marte");

...

<!-- Aquí aparecerá Hola Mundo / Hola Marte -->

<div id="saludo">Hola Mundo</div>

...

$("#saludo").prepend("Hola Marte <br /> ");

<!-- Aquí aparecerá Hola Marte / Hola Mundo -->

<div id="saludo">Hola Mundo</div>

empty() y remove()

Para eliminar elementos tenemos dos métodos. Con empty borramos el texto que se encuentre en un par de etiquetas contenedoras y con remove borramos el nodo entero.

$("#saludo").remove();

...

<!-- Este texto desparecerá -->

<div id="saludo">Hola Mundo</div>

Una tercera variante es detach(), que permite guardar los eventos asociados al elemento por si volvemos a insertarlo en la página. Veremos esto en más detalle la próxima entrada de esta serie.

replaceWith() y replaceAll()

Estos métodos son muy útiles. Con replaceWith sustituimos un nodo por lo que queramos...

$("#segundoElemento").replaceWith("<li>Marte</li>");

...

<ul>

<li id="primerElemento">Hola</li>

<li id="segundoElemento">Mundo</li> <!-- Marte -->

</ul>

Y con replaceAll hacemos algo parecido, pero invirtiendo los términos de la función.

Escuchas

El principal problema de trastear con el DOM surge cuando tenemos eventos asociados a los elementos que estamos manipulando. Simplificando, cuando escribimos algo así...

$("selector").click()....

... le estamos indicando al navegador que prepare una «escucha», esto es, que permanezca atento al momento en que se hace click sobre el selector indicado. Pero esta escucha la hace cuando se carga el documento y si luego insertamos nuevos elementos, aunque tengan el mismo selector (por clase, id o lo que sea), no los incluye en las escuchas a no ser que le especifiquemos lo contrario.

Por ejemplo, si tenemos una lista en la que al pulsar sobre un ítem colocamos otro igual, algo así:

<ul id="listado">

<li class="enlace">Soy un enlace</li>

</ul>

<script>

$(document).ready(function() {

$(".enlace").click(function() {

var cadena = "<li class='enlace'>Soy un enlace</li>";

$("#listado").append(cadena);

});

});

</script>

... el navegador solo estaría «escuchando» al primero, que ha sido el que ha recogido la primera vez y no a los que hemos generado dinámicamente.

Una solución posible a este problema sería colocar las escuchas en una función para regenerarlas cada vez que insertamos un elemento interactivo en el dom. Algo así:

function escuchas() {

$(".enlace").click(function() {

var cadena = "<li class='enlace'>Soy un enlace</li>";

$("#listado").append(cadena);

escuchas();

});

}

escuchas();

Pero esto provocaría otro problema y es que sobre algunos elementos se irían acumulando las escuchas. Así, en el caso anterior, la primera vez solo insertaría un elemento li, pero la segunda, dos, la tercera cuatro, etcétera. Por eso, en estos casos, antes hay que eliminar las escuchas mediante la función unbind().

function escuchas() {

$(".enlace").unbind("click");

$(".enlace").click(function() {

var cadena = "<li class='enlace'>Soy un enlace</li>";

$("#listado").append(cadena);

escuchas();

});

}

escuchas();

Otra solución, más elegante y cómoda, es definir la escucha al principio de tal manera que no se pierda mediante delegate(). En su sintaxis más sencilla, consiste en declarar el evento asociado a un elemento del DOM superior al que cambiará dinámicamente y utilizar la función on(). Es decir:

$("selector sobre un elemento del dom superior").on("evento", "subselector", function....

En nuestro caso:

$("#listado").on("click", ".enlace", function() {

var cadena = "<li class='enlace'>Soy un enlace</li>";

$("#listado").append(cadena);

});

Bueno, por hoy ya está bien. En la próxima entrada veremos cómo manejar AJAX con jQuery.

|| Tags: , , , ,

valoración de los lectores sobre jQuery Blues: 11. Manipulando el DOM

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4.3 sobre 5 (7 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

2 respuestas a “jQuery Blues: 11. Manipulando el DOM