Modificando atributos y propiedades

Curso de JavaScript: Manipulación del DOM

Entendiendo el DOM

¿Para qué aprender JavaScript?

¿Qué es DOM y Window Object?

Explorando Nodos del DOM

Seleccionando y Accesando a Elementos del DOM

Consultando el DOM con getElementById y querySelector

Navegación efectiva entre nodos

Manipulando Elementos del DOM

Modificando atributos y propiedades

Modificando texto en HTML

Modificando estilos en HTML

Modificando la visibilidad de elementos HTML

Creación de elementos con HTML Strings e insertAdjacentElement()

Agregando elementos con innerHTML e insertAdjacentHTML()

Creación de elementos con createElement()

Remover elementos con remove() y removeChild()

Clonación y reemplazo de elementos con cloneNode y replaceChild

Manipulando Eventos en el DOM

Entendiendo eventos y tipos: Burbuja, Captura y Propagación

Agregar y eliminar escuchadores de eventos o Event Listeners

El objeto evento o eventObject

Manejo de entradas de formulario y validación

Delegación de eventos y prevención de comportamiento predeterminado

Creando un Administrador de Tareas

Añadir tareas desde un formulario

Eliminar y editar tareas del DOM

Almacenamiento y carga de datos en localStorage

Eliminar y editar tareas del almacenamiento local

Inspeccionando y solucionando errores en el código

Personalizando la interfaz del administrador de tareas

Aún hay más por aprender

Asincronía en JavaScript

¿Cómo funciona el JavaScript Engine?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

¿Qué son los atributos y propiedades en HTML y JavaScript?

Los atributos y propiedades son conceptos fundamentales que debes comprender para trabajar eficazmente con HTML y JavaScript. En pocas palabras, los atributos son las características que añadimos a las etiquetas HTML y las propiedades son su reflejo en el DOM, manipuladas mediante JavaScript.

¿Cómo se definen los atributos en HTML?

En HTML, los atributos proporcionan información adicional sobre los elementos. Estos se añaden directamente dentro de las etiquetas y especifican características de los elementos, tales como:

type (tipo de input)
value (valor por defecto)
class (para CSS)
id (identificador único)
required (campo obligatorio, entre otros)

Por ejemplo, una etiqueta de input podría parecerse a:

<input type="text" id="nombre" value="nombre" class="input-clase" required>

Cada uno de estos atributos describe una característica del elemento input.

¿Cómo se reflejan los atributos en propiedades dentro del DOM?

Una vez que el navegador termina de analizar el HTML y genera el Document Object Model (DOM), los atributos se convierten en propiedades de los objetos de los nodos del DOM. Esto significa que puedes acceder y manipular estas propiedades con JavaScript. Por ejemplo, para acceder al input en el DOM puedes usar:

const input = document.querySelector('#nombre');

Ejemplo de manipulación de propiedades

Voy a mostrar cómo se puede acceder y modificar estas propiedades utilizando JavaScript. Supongamos que quieres modificar el value del input desde JavaScript:

input.value = 'apelido';

Esto cambiaría el texto que el usuario ve en el campo de entrada. Sin embargo, si revisas el HTML original, el valor inicial del atributo value se mantendrá como estaba definido inicialmente y no reflejará este cambio dinámico.

Importancia de los estados iniciales y sincronización

Es importante destacar una diferencia crucial: los atributos en HTML reflejan el estado inicial del documento. Aunque los atributos y propiedades pueden compartir nombres y valores al principio, no siempre se sincronizan después de que el contenido se ha generado. Por lo tanto, cualquier cambio efectuado sobre las propiedades mediante JavaScript solo será visible en el DOM, mientras que los atributos en el HTML original permanecen intactos.

Resumen de mejores prácticas

Conocer la diferencia: Entiende cuándo debes manipular atributos (en el HTML) y cuándo propiedades (en el DOM).
Acceder por ID o clase: Usa querySelector para seleccionar elementos específicos.
Sincronización consciente: Recuerda que cambios en propiedades del DOM no actualizan los atributos en el código HTML original.

Al dominar estos conceptos, estarás en una mejor posición para crear y manipular documentos web de manera efectiva y dinámica. ¡Continúa explorando y experimentando para reforzar tu comprensión de JavaScript y HTML!

Aportes 12

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Mathías Cabrera

hace 9 meses

Los **atributos** son valores iniciales**** que se utilizan en la tag de apertura para controlar el comportamiento del elemento en HTML. Estos pueden el ID, la(s) clase(s). Las **propiedades** son el reflejo de estos atributos en JavaScript. Es decir, van a pasar a ser propiedades del objeto del nodo en JS. Es importante mencionar que por más que hayamos cambiado una propiedad desde JS de un objeto, la etiqueta a la que está referenciando seguirá teniendo el mismo atributo que se asignó en un principio. Esto se debe a que **los atributos reflejan el estado inicial del HTML**, es decir de cómo iniciamos el HTML.

Jaime Manuel Cutipa Calderón

hace 9 meses

En resumen: HTML: elemento.atributo DOM: objeto.propiedad

Natalia Gallego Heras

hace 9 meses

Hace unos días terminé el curso de Estructuras de Datos con JavaScript (también del profesor Diego de Granda) y, aunque ya había hecho otros relacionados con el Frontend, es como haber desbloqueado una dimensión extra, veo los nodos y su manipulación en 4K dentro del cerebro: <https://platzi.com/cursos/estructuras-datos/> (Añado que lo hice después del de Manipulación de arrays en JavaScript y no sé si lo habría disfrutado tanto de no haber seguido ese orden: <https://platzi.com/cursos/arrays/>)

David Styven Ruiz Valencia

hace 7 meses

En JavaScript, puedes modificar los **atributos** y **propiedades** de los elementos HTML para cambiar su comportamiento o apariencia. Los atributos se refieren a las propiedades definidas directamente en el HTML (como `id`, `class`, `src`, etc.), mientras que las propiedades son características de los objetos DOM que puedes manipular directamente con JavaScript (como `innerHTML`, `value`, `style`, etc.).

Adrian Burdiles

hace 3 meses

Las modificaciones que realizas en la consola no se graban en el archivo JavaScript; son temporales y afectan solo a la instancia actual del DOM. La finalidad de modificar desde la consola es probar y depurar código en tiempo real, lo que permite ver cómo cambiarían los elementos sin necesidad de modificar el archivo fuente. Esto es útil para experimentar y validar comportamientos antes de implementar cambios permanentes en tu código.

Raúl Adolfo Sánchez Rodríguez

hace 18 días

Propiedades y métodos vistos hasta ahora: ![](https://static.platzi.com/media/user_upload/arbol-27311da1-ea83-4fa9-b108-5bd44e4ff9f1.jpg)

Carlos Aponte

hace 2 meses

Me surgio una duda de que pasaria si en la propiedad el value es uno y en el atributo html es otro, cual se envia al hacer submit en un form? la respuesta es la propiedad Sin embargo, si por cualquier razon quieres cambiar el valor del atributo en el html, esto se puede hacer con el metodo setAttribute ejm: `input.setAttribute('value', 'Apellido');`

Pancho1995

hace 4 meses

Los atributos estandarizados en HTML que se convierten en propiedades en el DOM incluyen: 1. `id` 2. `class` 3. `value` 4. `type` 5. `name` 6. `src` 7. `href` 8. `alt` 9. `disabled` 10. `checked` 11. `readonly` 12. `maxlength` Estos atributos reflejan el estado inicial del HTML y se acceden y modifican a través de JavaScript a través de sus propiedades correspondientes en el objeto del DOM.

Pancho1995

hace 4 meses

No todos los atributos de las etiquetas HTML se convierten en propiedades en el DOM. Solo aquellos que son "estandarizados" y que el navegador reconoce. Por ejemplo, atributos como `id`, `class`, y `value` se convierten en propiedades, mientras que atributos que son específicos de ciertos contextos o no son relevantes para la representación visual, pueden no tener una propiedad correspondiente en el DOM. Además, algunos atributos como `data-*` se convierten en propiedades accesibles a través de `dataset`.

Kyb3r Cipher

hace 4 meses

Cuando un elemento/nodo es obtenido mendiante el object document en js obtendras su object en don (Document Object Model) ese object que nos dara el DOM tendra los atributos en modo de propiedades del object

Orlando Alonso Gonzales Paz

hace 6 meses

```js // Obtenemos el elemento del DOM con el id "input-id" y lo almacenamos en la variable 'input' const input = document.getElementById("input-id"); // Mostramos el elemento en la consola para ver sus propiedades básicas console.log(input); // Usamos 'console.dir()' para visualizar todas las propiedades y métodos del objeto 'input' console.dir(input); // Mostramos el valor actual del campo de entrada (input), que representa lo que el usuario ha ingresado console.dir(input.value); // Cambiamos el valor del campo 'value' del input a "Apellido" y lo mostramos en la consola console.dir(input.value = "Apellido"); // Mostramos en consola el nombre de la clase (o clases) que tiene el elemento 'input' console.dir(input.className); // Mostramos el atributo 'id' del elemento 'input' en la consola console.dir(input.id); ```// Obtenemos el elemento del DOM con el id "input-id" y lo almacenamos en la variable 'input' const input = document.getElementById("input-id"); // Mostramos el elemento en la consola para ver sus propiedades básicas console.log(input); // Usamos 'console.dir()' para visualizar todas las propiedades y métodos del objeto 'input' console.dir(input); // Mostramos el valor actual del campo de entrada (input), que representa lo que el usuario ha ingresado console.dir(input.value); // Cambiamos el valor del campo 'value' del input a "Apellido" y lo mostramos en la consola console.dir(input.value = "Apellido"); // Mostramos en consola el nombre de la clase (o clases) que tiene el elemento 'input' console.dir(input.className); // Mostramos el atributo 'id' del elemento 'input' en la consola console.dir(input.id);

Orlando Alonso Gonzales Paz

hace 6 meses

`// Obtenemos el elemento del DOM con el id "input-id" y lo almacenamos en la variable 'input' const input = document.getElementById("input-id"); // Mostramos el elemento en la consola para ver sus propiedades básicas console.log(input); // Usamos 'console.dir()' para visualizar todas las propiedades y métodos del objeto 'input' console.dir(input); // Mostramos el valor actual del campo de entrada (input), que representa lo que el usuario ha ingresado console.dir(input.value); // Cambiamos el valor del campo 'value' del input a "Apellido" y lo mostramos en la consola console.dir(input.value = "Apellido"); // Mostramos en consola el nombre de la clase (o clases) que tiene el elemento 'input' console.dir(input.className); // Mostramos el atributo 'id' del elemento 'input' en la consola console.dir(input.id);`