Manipulación del DOM con jQuery - 1
Manipulación del DOM con jQuery
Manipulación del DOM con jQuery - 1 es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 1 de 1. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 1 lecciones en total.
Introducción a los métodos
Hola:
Hasta ahora, hemos visto para qué se utiliza jQuery y cómo utilizar el selector.
Ahora veamos los métodos que nos permiten manipular el DOM.
Método text
Método text()
Utilizamos el método text() para acceder al contenido de un elemento HTML.
Utilice $ (selector).text() para leer el contenido de un elemento.
Además, el método text se utiliza para actualizar el contenido de un elemento. Basta con pasar el nuevo contenido al método text como argumento.
<h1 id="hello">Hello Coddy</h1>
<h2 id="target"></h2>
<script>
$(document).ready(function(){
/*
With the $ ('# hello') statement,
we selected the element with hello id
and set the element's content related
to the text method of this object to
the variable named result.
*/
var result = $('#hello').text();
/*
We find the element with the
target id in the DOM and assign the value
of the result variable to the
text method of this object.
*/
$('#target').text(result);
/*
As a result, we have assigned
the value of the h1 element
to the h2 element.
*/
});
</script>
Pregunta
Método html
Método html()
Nuestro siguiente método es html().
Como podemos deducir de su nombre, devuelve el elemento completo en lugar de solo el contenido del elemento que elegimos.
Definamos a continuación un elemento HTML de ejemplo.
Se definen dos elementos HTML con los ids base y target. Después, en cuanto se carga el DOM.
Todo el contenido HTML del elemento base se ha copiado y añadido al elemento con el id target
<div id="base">
<p>Hello Coddy</p>
<p>I'm p element</p>
</div>
<div id="target"></div>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the base element HTML
var baseHTML = $('#base').html();
/* update target element
by using baseHTML value
*/
$('#target').html(baseHTML);
})
</script>Selector de atributos
Método attr()
Utilizamos los atributos para definir comportamientos adicionales de los elementos HTML.
La mayoría de las veces, es posible que queramos acceder a los valores de estos atributos al escribir nuestro código JavaScript.
En estos casos, se utiliza el método attr.
Aprendamos este método mediante el ejemplo siguiente.
<a href="https://www.coddykit.com"
target="_blank"
title="CoddyKit Web App" class="base">
Go CoddyKit
</a>
<br/>
<span id="link-title"></span>
<script>
/*
Callback will run as son
as the DOM is loaded
*/
$(document).ready(function(){
//Read link's title attribute
var linkTitle = $('a').attr('title');
/* update target element content
by using linkTitle value
*/
$('#link-title').text(linkTitle);
})
</script>Atributo
El proceso para establecer nuevos atributos es similar al de los métodos text() y html() que aprendimos anteriormente.
Al pasar un argumento al método attr() que utilizamos para leer, podemos definir un nuevo atributo para el elemento de destino.
/*
The target attribute of the element with
my-link id has been passed the _blank value.
*/
// Mock for Judge0 Node environment
const element = { attr: function(name, value) { console.log(`Setting ${name} to ${value} for #my-link`); } };
const $ = (selector) => element;
$('#my-link').attr('target', '_blank');removeAttr
removeAttr()
Aprendimos a añadir un atributo;
ahora veamos cómo eliminar un atributo existente.
Para ello, utilizaremos el método removeAttr().
Veamos nuestro ejemplo.
/*
All elements
with tag a have been deleted.
*/
// Simulated DOM for Node.js
const elements = [
{ tag: 'a', target: '_blank' },
{ tag: 'a', target: '_self' },
{ tag: 'p' }
];
elements.forEach(el => {
if (el.tag === 'a') delete el.target;
});
console.log(JSON.stringify(elements));Método val
Método val()
Los formularios son indispensables para las aplicaciones web modernas. Utilizaremos el método val() para leer los datos que nuestros usuarios introduzcan en los elementos del formulario.
<input type="text" id="name"
name="yourname"
value="CoddyKit" />
<p>
Your name: <span id="target"></span>
</p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the input elemens value
var yourName = $('#name').val();
/* update target element
text by using yourName value
*/
$('#target').text(yourName);
})
</script>Advertencia
En nuestra lección sobre gestión de eventos, aprenderemos a escuchar cada dato introducido y reflejarlo en nuestro elemento span.
Información adicional
Para actualizar el valor de un input, como probablemente habrá deducido, pasamos argumentos al método val.
const $ = (selector) => ({
val: (value) => console.log(`Set ${selector} to ${value}`)
});
$('#name').val('New value')Enhorabuena
Enhorabuena 🎉
Hemos comenzado a aprender sobre la manipulación del DOM
En la siguiente sección continuaremos aprendiendo sobre la manipulación del DOM en jQuery.
Preguntas frecuentes
¿La lección «Manipulación del DOM con jQuery - 1» es gratis?
Sí — el texto completo de «Manipulación del DOM con jQuery - 1» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 1 lecciones en total.
¿Qué aprenderé en «Manipulación del DOM con jQuery - 1»?
Manipulación del DOM con jQuery Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar jQuery Academy?
No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 1.
¿Cuánto tiempo toma la lección «Manipulación del DOM con jQuery - 1»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?
Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.