Atributos y Propiedades en HTML y su Manipulación con JavaScript

Clase 6 de 27 • Curso de JavaScript: Manipulación del DOM

Resumen

¿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!

Mathías Cabrera

student•

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.

Kyb3r Cipher

student•

Buen aporte

Jaime Manuel Cutipa Calderón

student•

En resumen:

HTML: elemento.atributo

DOM: objeto.propiedad

Natalia Gallego Heras

student•

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/)

Miguel David Isaac Leiva Cid

student•

sii, con los otros cursos vas conectando todo y la mente queda flipando como dirian los españoles

David Styven Ruiz Valencia

student•

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

student•

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.

Diego Colín

student•

Muy útil saberlo

Loreto Romero Espinoza

student•

O sea que --> Nodo: Es cualquier "punto" o unidad del documento HTML que el DOM identifica para manipular, esto incluye etiquetas, textos dentro de etiquetas, o incluso atributos Aributo: Es un dato que añades a una etiqueta HTML para darle características específicas, como id, class, type. Estos atributos son parte del nodo elemento en el DOM. Propiedad: Es la forma en la que el nodo HTML se representa y maneja en JavaScript. Las propiedades permiten acceder o cambiar características del nodo, incluso las que vienen de los atributos.

Augusto Castellon Ferrel

company_admin•

Consulta? Se puede injectar datos usando solamante javaScript ejemplo quiero llenar/automatizar un formulario con datos que tengo en un excel o Notpad es posible?

Néstor Raúl Guzmán Díaz

student•

Si es posible, existen librerias para leer datos de excel como SheetJS (xlsx.js), creas uan funcion para leer el archivo y luego inyectas el valor obtenidoa los campso del formulario.

document.getElementById('name').value = excelData[0].name; document.getElementById('email').value = excelData[0].email; document.getElementById('phone').value = excelData[0].phone;

ERICK SANCHEZ

student•

Los atributos son lo que escribes en el HTML. Cuando el navegador crea el DOM, esos atributos se convierten en propiedades de los objetos que representan los elementos. Las propiedades son la forma en que JavaScript "ve" y manipula esos atributos.

Raúl Adolfo Sánchez Rodríguez

student•

Propiedades y métodos vistos hasta ahora:

Carlos Aponte

student•

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');

Francisco Zuñiga

student•

Los atributos estandarizados en HTML que se convierten en propiedades en el DOM incluyen:

id
class
value
type
name
src
href
alt
disabled
checked
readonly
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.

Francisco Zuñiga

student•

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

student•

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

student•

// 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

student•

// 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);

Atributos y Propiedades en HTML y su Manipulación con JavaScript

Entendiendo el DOM

Manipulación del DOM con JavaScript y APIs

Entendiendo el DOM y su Manipulación con JavaScript

Diferencias entre el DOM y el objeto Window en JavaScript

Seleccionando y Accesando a Elementos del DOM

Selección de Elementos del DOM con JavaScript

Navegación Jerárquica del DOM en JavaScript

Manipulando Elementos del DOM