manipulación DOM
Anteriormente, has visto que los marcos de JavaScript facilitan la obtención de elementos específicos mediante selectores y recorrido DOM . Sin embargo, para cambiar el contenido y la apariencia de elementos específicos en una página web, es necesario manipular el DOM y aplicar los cambios. Usar JavaScript puro supondría mucho trabajo, pero afortunadamente la mayoría de los marcos de JavaScript proporcionan funciones útiles que facilitan esta tarea.
Supongamos que tiene un cuadro con el ID the-box.
<div id="the-box">El mensaje va aquí</div>
Utilice jQuery para cambiar el texto a "El mensaje va aquí", que se puede utilizar fácilmente así:
$('#the-box').html('¡Este es el nuevo mensaje!');
De hecho, puedes usar código HTML en funciones y el navegador lo analizará, por ejemplo:
$('#the-box').html('¡Este es el <strong>nuevo</strong> mensaje!');
En este ejemplo, el contenido dentro del elemento DIV tiene este aspecto:
<div id="the-box">¡Este es el <strong>nuevo</strong> mensaje!'</div>
Por supuesto, en el ejemplo es necesario utilizar caracteres especiales como mayor o menor que, en lugar de especificar códigos de entidad HTML especiales. Puedes usar la función de texto de jQuery en su lugar:
$('#la-caja').text('300 >200');
El código después de actualizar el elemento div es el siguiente:
<div id="la-caja">300 > 200</div>
En el ejemplo anterior, el contenido existente se reemplaza por contenido nuevo. ¿Qué pasa si solo desea agregar alguna información al texto? Afortunadamente, jQuery proporciona la función de agregar para este propósito.
$('#the-box').append(', aquí va el mensaje');
Después de realizar las operaciones anteriores en el div original, el contenido del elemento div se ve así:
<div id="the-box">El mensaje va aquí, aquí va el mensaje</div>
En lugar de agregar, puede anteponer contenido, insertándolo antes del contenido existente en lugar de después. Además, jQuery proporciona funciones para insertar contenido dentro de un elemento determinado, ya sea antes o después. También hay funciones para reemplazar contenido, borrar contenido, eliminar elementos, clonar elementos y más.
Además de las funciones de manipulación DOM, los marcos de JavaScript suelen contener varias funciones para manipular estilos y clases de elementos. Por ejemplo, tiene una tabla que resalta una fila cuando pasa el mouse sobre ella. Puede crear una clase especial llamada hover que puede agregar dinámicamente a una fila. Usando YUI, puede usar el siguiente código para determinar si la fila tiene un nombre de clase flotante. Si lo tiene, se ignorará. Si no, se agregará.
if(row.hasClass('hover')) fila.removeClass('hover'); else row.addClass('hover');
Asimismo, la mayoría de los marcos de JavaScript tienen funciones integradas para manipular CSS.